Appearance

DateTimePicker 日期时间选择器 ​

介绍 ​

用于选择日期和时间，支持年、年月、日期、日期时间、时间等多种模式，可自定义格式和范围限制。

引入 ​

typescript
import { TnDateTimePicker } from "@tuniao/tn-ui";

代码演示 ​

基础用法（日期） ​

默认 mode 为 "date"，选择完整日期。

基础用法

点我查看代码
typescript
import { TnDateTimePicker } from "@tuniao/tn-ui";

@Entry
@ComponentV2
struct DateTimePickerBasic {
  @Local open: boolean = false;
  @Local value: string = "";

  build() {
    Column() {
      Button("选择日期")
        .onClick(() => {
          this.open = true;
        })
      Text(`已选择: ${this.value}`)
      TnDateTimePicker({
        modelValue: this.value,
        open: this.open,
        mode: "date",
        onConfirm: (value: string) => {
          this.value = value;
          this.open = false;
        },
        onClose: () => {
          this.open = false;
        },
      })
    }
  }
}

年月选择 ​

将 mode 设置为 "yearmonth"，仅选择年份和月份。

年月选择

点我查看代码
typescript
TnDateTimePicker({
  modelValue: this.value,
  open: this.open,
  mode: "yearmonth",
  onConfirm: (value: string) => {
    this.value = value;
    this.open = false;
  },
  onClose: () => {
    this.open = false;
  },
})

日期时间 ​

将 mode 设置为 "datetime"，同时选择日期和时间。

点我查看代码
typescript
TnDateTimePicker({
  modelValue: this.value,
  open: this.open,
  mode: "datetime",
  onConfirm: (value: string) => {
    this.value = value;
    this.open = false;
  },
  onClose: () => {
    this.open = false;
  },
})

时间选择 ​

将 mode 设置为 "time"，仅选择时间。

时间选择

点我查看代码
typescript
TnDateTimePicker({
  modelValue: this.value,
  open: this.open,
  mode: "time",
  onConfirm: (value: string) => {
    this.value = value;
    this.open = false;
  },
  onClose: () => {
    this.open = false;
  },
})

格式化 ​

通过 format 属性自定义日期时间的输出格式。

点我查看代码
typescript
TnDateTimePicker({
  modelValue: this.value,
  open: this.open,
  mode: "date",
  format: "YYYY/MM/DD",
  onConfirm: (value: string) => {
    this.value = value;
    this.open = false;
  },
  onClose: () => {
    this.open = false;
  },
})

范围限制 ​

通过 minTime 和 maxTime 属性限制可选的日期时间范围。

点我查看代码
typescript
TnDateTimePicker({
  modelValue: this.value,
  open: this.open,
  mode: "date",
  minTime: "2024-01-01",
  maxTime: "2026-12-31",
  onConfirm: (value: string) => {
    this.value = value;
    this.open = false;
  },
  onClose: () => {
    this.open = false;
  },
})

API ​

Props ​

参数说明类型默认值
modelValue当前选中的日期时间值string-
open是否打开选择器booleanfalse
mode选择器模式"year" | "yearmonth" | "date" | "datetime" | "time""date"
minTime可选最小时间string-
maxTime可选最大时间string-
format输出格式string-
initCurrentDateTime是否初始化为当前日期时间booleantrue
title标题string-

Events ​

事件名说明回调参数
onConfirm点击确认按钮时触发(value: string) => void
onCancel点击取消按钮时触发() => void
onClose选择器关闭时触发() => void
onChange选项变化时触发(value: string) => void