DatetimePicker 时间选择

引入

在或index.json中引入组件，详细介绍见快速上手。

选择完整时间

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.   },
  10.   onInput(event) {
  11.       currentDate: event.detail,
  12.     });
  13.   },
  14. });
  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.       } 
  10.         return `${value}月`;
  11.       }
  12.       return value;
  13.     },
  14.   },
  16.   onInput(event) {
  17.     this.setData({
  18.       currentDate: event.detail,
  19.     });
  20.   },
  21. });

选择日期（年月）

value 为时间戳。

  1. <van-datetime-picker
  2.   type="year-month"
  3.   value="{{ currentDate }}"
  4.   min-date="{{ minDate }}"
  5.   bind:input="onInput"

选择时间

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.   },
  9.     this.setData({
  10.       currentDate: event.detail,
  11.     });
  12.   },
  13. });
  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.       }
  9.       return options;
  10.     },
  11. });

API

Props

Events

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

外部样式类