日期选择器

介绍

用于选择时间，支持日期、时分等时间维度。

#引入

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

"usingComponents": {
  "mx-datetime-picker": "m-ui/mx-datetime-picker/index",
}

#代码演示

#选择完整时间

value 为时间戳。

 <mx-datetime-picker
    description="请选择时间"
    bind:confirm="toggleActionSheet"
    bind:cancel="toggleActionSheet"
    bind:close="toggleActionSheet"
    show="{{ show }}"
    type="datetime"
    data-type="datetime"
    loading="{{ loading }}"
    value="{{ currentDate1 }}"
    min-date="{{ minDate }}"
    bind:input="onInput"
  />
Page({
  data: {
    show: true,
    minHour: 10,
    maxHour: 20,
    minDate: new Date().getTime(),
    maxDate: new Date(2019, 10, 1).getTime(),
    currentDate: new Date().getTime(),
  },

  onInput(event) {
    this.setData({
      currentDate: event.detail,
    });
  },
});

#选择日期（年月日）

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

 <mx-datetime-picker
    description="请选择时间"
    bind:confirm="toggleActionSheet2"
    bind:cancel="toggleActionSheet2"
    bind:close="toggleActionSheet2"
    show="{{ show2 }}"
    type="date"
    data-type="date"
    value="{{ currentDate2 }}"
    min-date="{{ minDate }}"
    bind:input="onInput"
    formatter="{{ formatter }}"
  />
Page({
  data: {
    show2:true,
    currentDate: new Date().getTime(),
    minDate: new Date().getTime(),
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      }
      if (type === 'month') {
        return `${value}月`;
      }
      return value;
    },
  },

  onInput(event) {
    this.setData({
      currentDate: event.detail,
    });
  },
});

#选择日期（年月）

value 为时间戳。

<mx-datetime-picker
    description="请选择时间"
    bind:confirm="toggleActionSheet3"
    bind:cancel="toggleActionSheet3"
    bind:close="toggleActionSheet3"
    show="{{ show3 }}"
    type="year-month"
    data-type="year-month"
    value="{{ currentDate3 }}"
    min-date="{{ minDate }}"
    bind:input="onInput"
  />
Page({
  data: {
    show3：true,
    currentDate: new Date().getTime(),
    minDate: new Date().getTime(),
  },

  onInput(event) {
    this.setData({
      currentDate: event.detail,
    });
  },
});

#选择时间

value 为字符串。

<mx-datetime-picker
    description="请选择时间"
    bind:confirm="toggleActionSheet4"
    bind:cancel="toggleActionSheet4"
    bind:close="toggleActionSheet4"
    show="{{ show4 }}"
    type="time"
    data-type="time"
    value="{{ currentDate4 }}"
    min-hour="{{ minHour }}"
    max-hour="{{ maxHour }}"
    bind:input="onInput"
  />
Page({
  data: {
    shouw4:true,
    currentDate: '12:00',
    minHour: 10,
    maxHour: 20,
  },

  onInput(event) {
    this.setData({
      currentDate: event.detail,
    });
  },
});

#选项过滤器

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

 <mx-datetime-picker
    description="请选择时间"
    bind:confirm="toggleActionSheet5"
    bind:cancel="toggleActionSheet5"
    bind:close="toggleActionSheet5"
    show="{{ show5 }}"
    type="time"
    value="{{ currentDate4 }}"
    filter="{{ filter }}"
  />
Page({
  data: {
    show5:true,
    currentDate: '12:00',
    filter(type, options) {
      if (type === 'minute') {
        return options.filter((option) => option % 5 === 0);
      }

      return options;
    },
  },
});

#API

#Props

参数	说明	类型	默认值
value	当前选中值	string,number	-
type	类型，可选值为 date time year-month
不建议动态修改	string	datetime
min-date	可选的最小时间，精确到分钟	number	十年前
max-date	可选的最大时间，精确到分钟	number	十年后
min-hour	可选的最小小时，针对 time 类型	number	0
max-hour	可选的最大小时，针对 time 类型	number	23
min-minute	可选的最小分钟，针对 time 类型	number	0
max-minute	可选的最大分钟，针对 time 类型	number	59
filter	选项过滤函数(type 可能值为 year, month, day, hour, minute)	(type, values) => values	-
formatter	选项格式化函数(type 可能值为 year, month, day, hour, minute)	(type, value) => value	-
description	顶部栏标题	string	``
loading	是否显示加载状态	boolean	false
item-height	选项高度	number	44
confirm-button-text	确认按钮文字	string	确认
cancel-button-text	取消按钮文字	string	取消
visible-item-count	可见的选项个数	number	6

#Event

事件名	说明	回调参数
bind:close	弹窗关闭时触发	event.detail: 触发关闭事件的来源，枚举为confirm,cancel,more,overlay
bind:input	当值变化时触发的事件	当前 value
bind:cancel	点击取消按钮时触发的事件	-
bind:confirm	点击完成按钮时触发的事件	当前 value
bind:change	当值变化时触发的事件	组件实例

#外部样式类

类名	说明
active-class	选中项样式类
column-class	列样式类

#change 事件

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

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