DatetimePicker 时间选择

介绍

用于选择时间,支持日期、时分等时间维度,通常与 弹出层 组件配合使用

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-datetime-picker": "path/to/@vant/weapp/dist/datetime-picker/index"
  3. }

代码演示

选择完整时间

value 为时间戳

  1. <van-datetime-picker
  2. type="datetime"
  3. value="{{ currentDate }}"
  4. min-date="{{ minDate }}"
  5. max-date="{{ maxDate }}"
  6. bind:input="onInput"
  7. />
  1. Page({
  2. data: {
  3. minHour: 10,
  4. maxHour: 20,
  5. minDate: new Date().getTime(),
  6. maxDate: new Date(2019, 10, 1).getTime(),
  7. currentDate: new Date().getTime()
  8. },
  9. onInput(event) {
  10. this.setData({
  11. currentDate: event.detail
  12. });
  13. }
  14. });

选择日期(年月日)

value 为时间戳,通过传入 formatter 函数对选项文字进行处理

  1. <van-datetime-picker
  2. type="date"
  3. value="{{ currentDate }}"
  4. bind:input="onInput"
  5. min-date="{{ minDate }}"
  6. formatter="{{ formatter }}"
  7. />
  1. Page({
  2. data: {
  3. currentDate: new Date().getTime(),
  4. minDate: new Date().getTime(),
  5. formatter(type, value) {
  6. if (type === 'year') {
  7. return `${value}年`;
  8. } else if (type === 'month') {
  9. return `${value}月`;
  10. }
  11. return value;
  12. }
  13. },
  14. onInput(event) {
  15. this.setData({
  16. currentDate: event.detail
  17. });
  18. }
  19. });

选择日期(年月)

value 为时间戳

  1. <van-datetime-picker
  2. type="year-month"
  3. value="{{ currentDate }}"
  4. min-date="{{ minDate }}"
  5. bind:input="onInput"
  6. />
  1. Page({
  2. data: {
  3. currentDate: new Date().getTime(),
  4. minDate: new Date().getTime()
  5. },
  6. onInput(event) {
  7. this.setData({
  8. currentDate: event.detail
  9. });
  10. }
  11. });

选择时间

value 为字符串

  1. <van-datetime-picker
  2. type="time"
  3. value="{{ currentDate }}"
  4. min-hour="{{ minHour }}"
  5. max-hour="{{ maxHour }}"
  6. bind:input="onInput"
  7. />
  1. Page({
  2. data: {
  3. currentDate: '12:00',
  4. minHour: 10,
  5. maxHour: 20
  6. },
  7. onInput(event) {
  8. this.setData({
  9. currentDate: event.detail
  10. });
  11. }
  12. });

选项过滤器

通过传入 filter 函数,可以对选项数组进行过滤,实现自定义时间间隔

  1. <van-datetime-picker
  2. type="time"
  3. value="{{ currentDate }}"
  4. filter="{{ filter }}"
  5. />
  1. Page({
  2. data: {
  3. currentDate: '12:00',
  4. filter(type, options) {
  5. if (type === 'minute') {
  6. return options.filter(option => option % 5 === 0)
  7. }
  8. return options;
  9. }
  10. }
  11. });

API

Props

参数说明类型默认值版本
value当前选中值string | number--
type类型,可选值为 date time year-month 不建议动态修改stringdatetime-
min-date可选的最小时间,精确到分钟number十年前-
max-date可选的最大时间,精确到分钟number十年后-
min-hour可选的最小小时,针对 time 类型number0-
max-hour可选的最大小时,针对 time 类型number23-
min-minute可选的最小分钟,针对 time 类型number0-
max-minute可选的最大分钟,针对 time 类型number59-
filter选项过滤函数(type, values) => values--
formatter选项格式化函数(type, value) => value--
title顶部栏标题string''-
show-toolbar是否显示顶部栏booleantrue-
loading是否显示加载状态booleanfalse-
item-height选项高度number44-
confirm-button-text确认按钮文字string确认-
cancel-button-text取消按钮文字string取消-
visible-item-count可见的选项个数number5-

Events

事件名称说明回调参数
input当值变化时触发的事件当前 value
change当值变化时触发的事件组件实例
confirm点击完成按钮时触发的事件当前 value
cancel点击取消按钮时触发的事件-

change 事件

change事件中,可以获取到组件实例,对组件进行相应的更新等操作:

函数说明
getColumnValue(index)获取对应列中选中的值
setColumnValue(index, value)设置对应列中选中的值
getColumnValues(index)获取对应列中所有的备选值
setColumnValues(index, values)设置对应列中所有的备选值
getValues()获取所有列中被选中的值,返回一个数组
setValues(values)values为一个数组,设置所有列中被选中的值

外部样式类

类名说明
active-class选中项样式类
toolbar-class顶部栏样式类
column-class列样式类

DatetimePicker 时间选择 - 图1