DatePicker 时间选择框

选择日期。支持年、月、周、日类型，支持范围选择等。

基础用法

日期选择框的基础使用。

年份选择框

年份选择框的基础使用。

月份选择框

月份选择框的基础使用。

季度选择框

季度选择框的基础使用。

周选择框

周选择框的基础使用。

范围选择器

范围输入器的基础使用。

日期范围

周范围

月范围

季度范围

年范围

日期时间范围

<template>
  <p>日期范围</p>
  <tu-range-picker allowClear @change="onChange" @select="onSelect" />

  <p>周范围</p>
  <tu-range-picker
    allowClear
    mode="week"
    @change="onChange"
    @select="onSelect"
  />

  <p>月范围</p>
  <tu-range-picker
    allowClear
    mode="month"
    @change="onChange"
    @select="onSelect"
  />

  <p>季度范围</p>
  <tu-range-picker
    allowClear
    mode="quarter"
    @change="onChange"
    @select="onSelect"
  />

  <p>年范围</p>
  <tu-range-picker
    allowClear
    mode="year"
    @change="onChange"
    @select="onSelect"
  />

  <p>日期时间范围</p>
  <tu-range-picker
    allowClear
    showTime
    @change="onChange"
    @select="onSelect"
    @ok="onOk"
  />
</template>

<script lang="ts" setup>
const onChange = (dateString: string, date: Date) => {
  console.log('onChange', dateString, date);
};

const onSelect = (dateString: string, date: Date) => {
  console.log('onSelect', dateString, date);
};

const onOk = (dateString: string, date: Date) => {
  console.log('onOk', dateString, date);
};
</script>

<template>
  <p>日期范围</p>
  <tu-range-picker allowClear @change="onChange" @select="onSelect" />

  <p>周范围</p>
  <tu-range-picker
    allowClear
    mode="week"
    @change="onChange"
    @select="onSelect"
  />

  <p>月范围</p>
  <tu-range-picker
    allowClear
    mode="month"
    @change="onChange"
    @select="onSelect"
  />

  <p>季度范围</p>
  <tu-range-picker
    allowClear
    mode="quarter"
    @change="onChange"
    @select="onSelect"
  />

  <p>年范围</p>
  <tu-range-picker
    allowClear
    mode="year"
    @change="onChange"
    @select="onSelect"
  />

  <p>日期时间范围</p>
  <tu-range-picker
    allowClear
    showTime
    @change="onChange"
    @select="onSelect"
    @ok="onOk"
  />
</template>

<script lang="ts" setup>
const onChange = (dateString: string, date: Date) => {
  console.log('onChange', dateString, date);
};

const onSelect = (dateString: string, date: Date) => {
  console.log('onSelect', dateString, date);
};

const onOk = (dateString: string, date: Date) => {
  console.log('onOk', dateString, date);
};
</script>

带时间的日期选择

使用 showTime 可以使用带时间的日期选择。

显示时分

显示时分秒

时间范围

默认值

日期输入器有默认值的情况。

日期

自定义日期格式

日期时间

周

月

年

日期范围

月份范围

<template>
  <p>日期</p>
  <tu-date-picker
    allowClear
    defaultValue="2024-01-01"
    @select="onSelect"
    @change="onChange"
  />

  <p>自定义日期格式</p>
  <tu-date-picker
    allowClear
    defaultValue="2024-01-01"
    :format="(value: Date) => `自定义格式： ${dayjs(value).format('YYYY-MM-DD')}`"
    @select="onSelect"
    @change="onChange"
  />

  <p>日期时间</p>
  <tu-date-picker
    allowClear
    showTime
    defaultValue="2024-01-01 10:01:01"
    @select="onSelect"
    @change="onChange"
  />

  <p>周</p>
  <tu-week-picker
    allowClear
    :defaultValue="dayjs('2024-01-01')"
    @select="onSelect"
    @change="onChange"
  />

  <p>月</p>
  <tu-month-picker
    allowClear
    defaultValue="2024-01"
    @select="onSelect"
    @change="onChange"
  />

  <p>年</p>
  <tu-year-picker
    allowClear
    defaultValue="2024"
    @select="onSelect"
    @change="onChange"
  />

  <p>日期范围</p>
  <tu-range-picker
    allowClear
    showTime
    :defaultValue="['2024-01-01 01:01:01', '2024-02-14 02:02:02']"
    @select="onSelect"
    @change="onChange"
  />

  <p>月份范围</p>
  <tu-range-picker
    allowClear
    mode="month"
    :defaultValue="['2024-01', '2025-01']"
    @select="onSelect"
    @change="onChange"
  />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';

const onChange = (dateString: string, date: Date) => {
  console.log('onChange', dateString, date);
};

const onSelect = (dateString: string, date: Date) => {
  console.log('onSelect', dateString, date);
};

const onOk = (dateString: string, date: Date) => {
  console.log('onOk', dateString, date);
};
</script>

<template>
  <p>日期</p>
  <tu-date-picker
    allowClear
    defaultValue="2024-01-01"
    @select="onSelect"
    @change="onChange"
  />

  <p>自定义日期格式</p>
  <tu-date-picker
    allowClear
    defaultValue="2024-01-01"
    :format="(value: Date) => `自定义格式： ${dayjs(value).format('YYYY-MM-DD')}`"
    @select="onSelect"
    @change="onChange"
  />

  <p>日期时间</p>
  <tu-date-picker
    allowClear
    showTime
    defaultValue="2024-01-01 10:01:01"
    @select="onSelect"
    @change="onChange"
  />

  <p>周</p>
  <tu-week-picker
    allowClear
    :defaultValue="dayjs('2024-01-01')"
    @select="onSelect"
    @change="onChange"
  />

  <p>月</p>
  <tu-month-picker
    allowClear
    defaultValue="2024-01"
    @select="onSelect"
    @change="onChange"
  />

  <p>年</p>
  <tu-year-picker
    allowClear
    defaultValue="2024"
    @select="onSelect"
    @change="onChange"
  />

  <p>日期范围</p>
  <tu-range-picker
    allowClear
    showTime
    :defaultValue="['2024-01-01 01:01:01', '2024-02-14 02:02:02']"
    @select="onSelect"
    @change="onChange"
  />

  <p>月份范围</p>
  <tu-range-picker
    allowClear
    mode="month"
    :defaultValue="['2024-01', '2025-01']"
    @select="onSelect"
    @change="onChange"
  />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';

const onChange = (dateString: string, date: Date) => {
  console.log('onChange', dateString, date);
};

const onSelect = (dateString: string, date: Date) => {
  console.log('onSelect', dateString, date);
};

const onOk = (dateString: string, date: Date) => {
  console.log('onOk', dateString, date);
};
</script>

不可选取的时间

使用 disabledDate 可以禁用某些日期。使用 disabledTime 可以禁用时间，需要配合 showTime 使用。

日期不可选

日期范围不可选

日期时间不可选

日期时间范围不可选

<template>
  <p>日期不可选</p>
  <tu-date-picker
    allowClear
    :disabledDate="(current: Date) => dayjs(current).isBefore(dayjs())"
  />

  <p>日期范围不可选</p>
  <tu-range-picker
    allowClear
    :disabledDate="(current: Date) => dayjs(current).isBefore(dayjs())"
  />

  <p>日期时间不可选</p>
  <tu-date-picker
    allowClear
    show-time
    :disabledDate="(current: Date) => dayjs(current).isBefore(dayjs())"
    :disabledTime="
      () => {
        return {
          disabledHours: () => range(6, 24),
          disabledMinutes: () => range(30, 60),
          disabledSeconds: () => range(30, 60)
        };
      }
    "
  />

  <p>日期时间范围不可选</p>
  <tu-range-picker
    allowClear
    show-time
    :timePickerProps="{ hideDisabledOptions: true }"
    :disabledDate="(current: Date) => dayjs(current).isBefore(dayjs())"
    :disabledTime="
      (date: Date, type: String) => {
        return {
          disabledHours: () => (type === 'start' ? range(0, 6) : range(6, 24)),
          disabledMinutes: () => (type === 'end' ? range(0, 30) : [31, 60]),
          disabledSeconds: () => range(30, 60)
        };
      }
    "
  />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';

const range = (start: number, end: number) => {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
};
</script>

<template>
  <p>日期不可选</p>
  <tu-date-picker
    allowClear
    :disabledDate="(current: Date) => dayjs(current).isBefore(dayjs())"
  />

  <p>日期范围不可选</p>
  <tu-range-picker
    allowClear
    :disabledDate="(current: Date) => dayjs(current).isBefore(dayjs())"
  />

  <p>日期时间不可选</p>
  <tu-date-picker
    allowClear
    show-time
    :disabledDate="(current: Date) => dayjs(current).isBefore(dayjs())"
    :disabledTime="
      () => {
        return {
          disabledHours: () => range(6, 24),
          disabledMinutes: () => range(30, 60),
          disabledSeconds: () => range(30, 60)
        };
      }
    "
  />

  <p>日期时间范围不可选</p>
  <tu-range-picker
    allowClear
    show-time
    :timePickerProps="{ hideDisabledOptions: true }"
    :disabledDate="(current: Date) => dayjs(current).isBefore(dayjs())"
    :disabledTime="
      (date: Date, type: String) => {
        return {
          disabledHours: () => (type === 'start' ? range(0, 6) : range(6, 24)),
          disabledMinutes: () => (type === 'end' ? range(0, 30) : [31, 60]),
          disabledSeconds: () => range(30, 60)
        };
      }
    "
  />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';

const range = (start: number, end: number) => {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
};
</script>

预设时间快捷选择

使用 shortcuts 可以预设时间快捷选择。

日期时间

月份

日期时间范围

月份范围

<template>
  <p>日期时间</p>
  <tu-date-picker
    allowClear
    show-time
    :shortcuts="[
      {
        label: '2小时后',
        value: () => dayjs().add(2, 'hour')
      },
      {
        label: '1周后',
        value: () => dayjs().add(1, 'week')
      },
      {
        label: '1个月后',
        value: () => dayjs().add(1, 'month')
      }
    ]"
  />

  <p>月份</p>
  <tu-month-picker
    allowClear
    :shortcuts="[
      {
        label: '上1个月',
        value: () => dayjs().subtract(1, 'month')
      },
      {
        label: '6个月后',
        value: () => dayjs().add(6, 'month')
      },
      {
        label: '2年以后',
        value: () => dayjs().add(2, 'year')
      }
    ]"
  />

  <p>日期时间范围</p>
  <tu-range-picker
    allowClear
    :shortcuts="[
      {
        label: '7天后',
        value: () => [dayjs(), dayjs().add(1, 'week')]
      },
      {
        label: '30天后',
        value: () => [dayjs(), dayjs().add(1, 'month')]
      },
      {
        label: '1年后',
        value: () => [dayjs(), dayjs().add(1, 'year')]
      }
    ]"
  />

  <p>月份范围</p>
  <tu-range-picker
    allowClear
    mode="month"
    :shortcuts="[
      {
        label: '6个月后',
        value: () => [dayjs(), dayjs().add(6, 'month')]
      },
      {
        label: '12个月后',
        value: () => [dayjs(), dayjs().add(1, 'year')]
      },
      {
        label: '10年后',
        value: () => [dayjs(), dayjs().add(10, 'year')]
      }
    ]"
  />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
</script>

<template>
  <p>日期时间</p>
  <tu-date-picker
    allowClear
    show-time
    :shortcuts="[
      {
        label: '2小时后',
        value: () => dayjs().add(2, 'hour')
      },
      {
        label: '1周后',
        value: () => dayjs().add(1, 'week')
      },
      {
        label: '1个月后',
        value: () => dayjs().add(1, 'month')
      }
    ]"
  />

  <p>月份</p>
  <tu-month-picker
    allowClear
    :shortcuts="[
      {
        label: '上1个月',
        value: () => dayjs().subtract(1, 'month')
      },
      {
        label: '6个月后',
        value: () => dayjs().add(6, 'month')
      },
      {
        label: '2年以后',
        value: () => dayjs().add(2, 'year')
      }
    ]"
  />

  <p>日期时间范围</p>
  <tu-range-picker
    allowClear
    :shortcuts="[
      {
        label: '7天后',
        value: () => [dayjs(), dayjs().add(1, 'week')]
      },
      {
        label: '30天后',
        value: () => [dayjs(), dayjs().add(1, 'month')]
      },
      {
        label: '1年后',
        value: () => [dayjs(), dayjs().add(1, 'year')]
      }
    ]"
  />

  <p>月份范围</p>
  <tu-range-picker
    allowClear
    mode="month"
    :shortcuts="[
      {
        label: '6个月后',
        value: () => [dayjs(), dayjs().add(6, 'month')]
      },
      {
        label: '12个月后',
        value: () => [dayjs(), dayjs().add(1, 'year')]
      },
      {
        label: '10年后',
        value: () => [dayjs(), dayjs().add(10, 'year')]
      }
    ]"
  />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
</script>

定制预设范围位置

使用 shortcutsPosition 可以将预设时间快捷选择放到左边、右边或者底部。

左侧

右侧

<template>
  <p>左侧</p>
  <tu-row :gutter="20">
    <tu-col :span="12">
      <tu-date-picker
        allowClear
        shortcuts-position="left"
        :shortcuts="shortcuts"
      />
    </tu-col>
    <tu-col :span="12">
      <tu-range-picker
        allowClear
        shortcuts-position="left"
        :shortcuts="rangeShortcuts"
      />
    </tu-col>
  </tu-row>

  <p>右侧</p>
  <tu-row :gutter="20">
    <tu-col :span="12">
      <tu-date-picker
        allowClear
        shortcuts-position="right"
        :shortcuts="shortcuts"
      />
    </tu-col>
    <tu-col :span="12">
      <tu-range-picker
        allowClear
        shortcuts-position="right"
        :shortcuts="rangeShortcuts"
      />
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';

const shortcuts = [
  {
    label: '昨天',
    value: () => dayjs().subtract(1, 'day')
  },
  {
    label: '今天',
    value: () => dayjs()
  },
  {
    label: '1周后',
    value: () => dayjs().add(1, 'week')
  },
  {
    label: '1个月后',
    value: () => dayjs().add(1, 'month')
  },
  {
    label: '2个月后',
    value: () => dayjs().add(2, 'month')
  }
];

const rangeShortcuts = [
  {
    label: '之后2天',
    value: () => [dayjs(), dayjs().add(2, 'day')]
  },
  {
    label: '之后7天',
    value: () => [dayjs(), dayjs().add(1, 'month')]
  },
  {
    label: '之后30天',
    value: () => [dayjs(), dayjs().add(1, 'month')]
  },
  {
    label: '之后6月',
    value: () => [dayjs(), dayjs().add(6, 'month')]
  },
  {
    label: '之后12月',
    value: () => [dayjs(), dayjs().add(1, 'year')]
  },
  {
    label: '之后10年',
    value: () => [dayjs(), dayjs().add(10, 'year')]
  }
];
</script>

<template>
  <p>左侧</p>
  <tu-row :gutter="20">
    <tu-col :span="12">
      <tu-date-picker
        allowClear
        shortcuts-position="left"
        :shortcuts="shortcuts"
      />
    </tu-col>
    <tu-col :span="12">
      <tu-range-picker
        allowClear
        shortcuts-position="left"
        :shortcuts="rangeShortcuts"
      />
    </tu-col>
  </tu-row>

  <p>右侧</p>
  <tu-row :gutter="20">
    <tu-col :span="12">
      <tu-date-picker
        allowClear
        shortcuts-position="right"
        :shortcuts="shortcuts"
      />
    </tu-col>
    <tu-col :span="12">
      <tu-range-picker
        allowClear
        shortcuts-position="right"
        :shortcuts="rangeShortcuts"
      />
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';

const shortcuts = [
  {
    label: '昨天',
    value: () => dayjs().subtract(1, 'day')
  },
  {
    label: '今天',
    value: () => dayjs()
  },
  {
    label: '1周后',
    value: () => dayjs().add(1, 'week')
  },
  {
    label: '1个月后',
    value: () => dayjs().add(1, 'month')
  },
  {
    label: '2个月后',
    value: () => dayjs().add(2, 'month')
  }
];

const rangeShortcuts = [
  {
    label: '之后2天',
    value: () => [dayjs(), dayjs().add(2, 'day')]
  },
  {
    label: '之后7天',
    value: () => [dayjs(), dayjs().add(1, 'month')]
  },
  {
    label: '之后30天',
    value: () => [dayjs(), dayjs().add(1, 'month')]
  },
  {
    label: '之后6月',
    value: () => [dayjs(), dayjs().add(6, 'month')]
  },
  {
    label: '之后12月',
    value: () => [dayjs(), dayjs().add(1, 'year')]
  },
  {
    label: '之后10年',
    value: () => [dayjs(), dayjs().add(10, 'year')]
  }
];
</script>

动态控制选取范围

根据选择的值来控制选取的范围，使用 onSelect 配合 disabledDate 来实现。

可选取前后7天范围

额外的页脚

在浮层中加入额外的页脚，以满足某些定制信息的需求。

禁用

禁用状态。

定制日期单元格

利用具名插槽 cell 可以定制日期单元格。

双向绑定

通过 v-model 实现值的双向绑定。

日期绑定值

日期范围绑定值

自定义触发元素

自定义触发元素。

只使用面板

只用选择面板，不显示输入框。

尺寸

设置 size 可以使用四种尺寸（mini small medium large）的输入框。

超小较小中等较大

日期选择

日期时间

日期范围

Common API

Common Attributes

参数名	描述	类型	默认值
locale	国际化配置，用于覆盖locale中的 datePicker 字段	`Record`	-
hide-trigger	没有触发元素，只显示选择面板	`Boolean`	false
allow-clear	是否允许清除	`Boolean`	true
readonly	是否为只读	`Boolean`	false
error	是否为错误状态	`Boolean`	false
size	日期选择器的尺寸	`String`	medium
shortcuts	预设时间范围快捷选择	`Array`	[]
shortcuts-position	预设范围在面板上的位置，默认放在下方，侧边一般用于大量预设时间的场景	`String`	bottom
position	弹出的框的位置	`String`	bl
popup-visible	控制弹出框的打开或者关闭状态	`Boolean`	-
default-popup-visible	默认弹出框是打开或者关闭	`Boolean`	false
trigger-props	可以传入Trigger 组件的参数	`TriggerProps`	-
unmount-on-close	是否在隐藏的时候销毁DOM结构	`Boolean`	false
placeholder	提示文案	`String`	-
disabled	是否禁用	`Boolean`	false
disabled-date	不可选取的日期	`Function`	-
disabled-time	不可选取的时间	`Function`	-
picker-value(v-model)	面板显示的日期	`DateStringNumber`	-
default-picker-value	面板默认显示的日期	`DateStringNumber`	-
popup-container	弹出框的挂载容器	`StringHTMLElementNullUndefined`	-
value-format	值的格式，对 value、defaultValue、pickerValue、defaultPickerValue 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考字符串解析格式）。如果没有指定，将格式化为字符串，格式同 format。	`TimestampDateString`	-
preview-shortcut	是否要预览快捷选择的结果	`Boolean`	true
show-confirm-btn	是否显示确认按钮，showTime 为 true 的时候始终显示。	`Boolean`	false
disabled-input	是否禁止键盘输入日期	`Boolean`	false
abbreviation	是否启用缩写	`Boolean`	true

Common Events

事件名	描述	参数
change	组件值发生改变	`Function`
select	选中日期发生改变但组件值未改变	`Function`
popup-visible-change	打开或关闭弹出框	`Function`
ok	点击确认按钮	`Function`
clear	点击清除按钮	`Function`
select-shortcut	点击快捷选项	`Function`
picker-value-change	面板日期改变	`Function`

Date-Picker Attributes

参数名	描述
prefix	输入框前缀
suffix-icon	输入框后缀图标
icon-next-double	双箭头往后翻页图标
icon-prev-double	双箭头往前翻页图标
icon-next	单箭头往后翻页图标
icon-prev	单箭头往前翻页图标
cell	自定义日期单元格的内容
extra	额外的页脚

Week-Picker Attributes

参数名	描述	类型	默认值
v-model	绑定值	`DateStringNumber`	-
default-value	默认值	`DateStringNumber`	-
format	展示日期的格式，参考字符串解析格式	`String`	gggg-wo
value-format	值的格式，对value、defaultValue、pickerValue、defaultPickerValue 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考字符串解析格式）。	`String`	YYYY-MM-DD
day-start-of-week	每周的第一天开始于周几，0 - 周日，1 - 周一，以此类推。	`Number`	0

Quarter-Picker Attributes

参数名	描述	类型	默认值
v-model	绑定值	`DateStringNumber`	-
default-value	默认值	`DateStringNumber`	-
format	展示日期的格式，参考字符串解析格式	`String`	YYYY-MM
value-format	值的格式，对value、defaultValue、pickerValue、defaultPickerValue 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考字符串解析格式）。	`String`	YYYY-MM

Month-Picker Attributes

参数名	描述	类型	默认值
model-value / v-model	绑定值	`DateStringNumber`	-
default-value	默认值	`DateStringNumber`	-
format	展示日期的格式，参考字符串解析格式	`String`	YYYY-MM

Year-Picker Attributes

参数名	描述	类型	默认值
model-value / v-model	绑定值	`DateStringNumber`	-
default-value	默认值	`DateStringNumber`	-
format	展示日期的格式，参考字符串解析格式	`String`	YYYY

Range-Picker Attributes

参数名	描述	类型	默认值
mode	范围选择器的类型	`String`	date
v-model	绑定值	`Array`	-
default-value	默认值	`Array`	-
picker-value	默认面板显示的日期	`Array`	-
default-picker-value	面板显示的日期	`Array`	-
disabled	是否禁用	`BooleanArray`	false
day-start-of-week	每周的第一天开始于周几，0 - 周日，1 - 周一，以此类推。	`Number`	0
format	展示日期的格式，参考字符串解析格式	`String`	-
value-format	值的格式，对value、defaultValue、pickerValue、defaultPickerValue 以及事件中的返回值生效，支持设置为时间戳，Date 和字符串（参考字符串解析格式）。如果没有指定，将格式化为字符串，格式同 format。	`TimestampDateString`	-
show-time	是否增加时间选择	`Boolean`	false
time-picker-props	时间显示的参数	`Object`	-
placeholder	提示文案	`Array`	-
disabled-date	不可选的日期	`Function`	-
disabled-time	不可选取的时间	`Function`	-
separator	范围选择器输入框内的分割符号	`String`	-
exchange-time	时间是否会交换，默认情况下时间会影响和参与开始和结束值的排序，如果要固定时间顺序，可将其关闭。	`String`	true
disabled-input	是否禁止键盘输入日期	`Boolean`	false
abbreviation	是否启用缩写	`Boolean`	true

Range-Picker Events

事件名	描述	参数
change	组件值发生改变	`Function`
select	选中日期发生改变但组件值未改变	`Function`
popup-visible-change	打开或关闭弹出框	`Function`
ok	点击确认按钮	`Function`
clear	点击清除按钮	`Function`
select-shortcut	点击快捷选项	`Function`
picker-value-change	面板日期改变	`Function`

ShortcutType

参数名	描述	类型	默认值
label	选项的内容	`StringNumberFunction`	-
value	选项值	`DateStringNumberArrayFunction`	-
format	解析值所使用的格式，参考字符串解析格式	`String`	-

字符串解析格式

格式	输出	描述
YY	21	两位数的年份
YYYY	2021	四位数年份
M	1-12	月份，从 1 开始
MM	01-12	月份，两位数
MMM	Jan-Dec	缩写的月份名称
MMMM	January-December	完整的月份名称
D	1-31	月份里的一天
DD	01-31	月份里的一天，两位数
d	0-6	一周中的一天，星期天是 0
dd	Su-Sa	最简写的一周中一天的名称
ddd	Sun-Sat	简写的一周中一天的名称
dddd	Sunday-Saturday	一周中一天的名称
H	0-23	小时
HH	00-23	小时，两位数
h	1-12	小时, 12 小时制
hh	01-12	小时, 12 小时制, 两位数
m	0-59	分钟
mm	00-59	分钟，两位数
s	0-59	秒
ss	00-59	秒，两位数
S	0-9	数百毫秒，一位数
SS	00-99	几十毫秒，两位数
SSS	000-999	毫秒，三位数字
Z	-5:00	UTC 的偏移量
ZZ	-0500	UTC 的偏移量，数字前面加上 0
A	AM PM	-
a	am pm	-
Do	1st... 3st	带序号的月份中的某天
X	1410715640.579	Unix 时间戳
x	1410715640579	Unix 毫秒时间戳

DatePicker 时间选择框 ​

基础用法 ​

年份选择框 ​

月份选择框 ​

季度选择框 ​

周选择框 ​

范围选择器 ​

带时间的日期选择 ​

默认值 ​

不可选取的时间 ​

预设时间快捷选择 ​

定制预设范围位置 ​

动态控制选取范围 ​

额外的页脚 ​

禁用 ​

定制日期单元格 ​

双向绑定 ​

自定义触发元素 ​

只使用面板 ​

尺寸 ​

Common API ​

Common Attributes ​

Common Events ​

Date-Picker Attributes ​

Week-Picker Attributes ​

Quarter-Picker Attributes ​

Month-Picker Attributes ​

Year-Picker Attributes ​

Range-Picker Attributes ​

Range-Picker Events ​

ShortcutType ​

字符串解析格式 ​

DatePicker 时间选择框

基础用法

年份选择框

月份选择框

季度选择框

周选择框

范围选择器

带时间的日期选择

默认值

不可选取的时间

预设时间快捷选择

定制预设范围位置

动态控制选取范围

额外的页脚

禁用

定制日期单元格

双向绑定

自定义触发元素

只使用面板

尺寸

Common API

Common Attributes

Common Events

Date-Picker Attributes

Week-Picker Attributes

Quarter-Picker Attributes

Month-Picker Attributes

Year-Picker Attributes

Range-Picker Attributes

Range-Picker Events

ShortcutType

字符串解析格式