DateTimePicker 日期时间选择器

介绍

支持年月日以及时间分钟的时间选择器

使用指南

一般用法

一般用法

<tms-date-time-picker bindchange="onSelectChange"/>

选择年月日小时分钟

<tms-date-time-picker type="year-month-day-hour-minute"/>

选择月日

<tms-date-time-picker type="month-day"/>

自定义文案

<tms-date-time-picker type="month-day" filter="{{filter}}"/>

Component({
  data: {
    filter(type, value, currentTime, currentDate) {   // currentTime为当前时间10位时间戳 currentDate为当前时间的date对象
      if (type === 'hour') {
        return `${value}h`;
      } else if (type === 'minute') {
        return `${value}m`;
      }
      return value;
    },
  },
})

定义初始时间

<tms-date-time-picker timestamp="1604389759" type="year-month-day-hour-minute"/>

限制选择区间

<tms-date-time-picker type="year-month-day-hour-minute" minDate="1604389759" maxDate="1635925759"/>

定义数字样式间隔

<tms-date-time-picker type="year-month-day-hour-minute" itemHeight="{{70}}"/>

API

属性	说明	类型	默认值	版本
type	显示年月日小时分钟的哪几列	string	'year-month-day-hour-minute'
timestamp	时间默认值	number	当前时间戳
filter	自定义显示每一项的文案	function
min-date	可选时间范围最小值	number	当前时间往前十年
max-date	可选时间范围最大值	number	当前时间往后十年
cell-height	单行元素高度	string	88rpx
list-height	选择器内容区域高度	string	200rpx
root-style	自定义组件根元素容器style	string	-
action-style	自定义头部文案区域元素style	string	-
picker-list-style	自定义滚动区域容器元素style	string	-
show-action-bar	是否显示顶部栏	boolean	true
left-text	顶部栏左侧文案	string	''
right-text	顶部栏右侧文案	string	''
title	顶部栏中间标题	string	''

EVENTS

属性	说明	类型
bind:on-change	滚动时间变化事件	(event) => {}
bind:on-click-title	点击标题事件	(event) => {}
bind:on-click-left-button	点击左侧文字事件	(event) => {}
bind:on-click-right-button	点击右侧文字事件	(event) => {}

CSS变量

// 组件根容器padding
--picker-container-padding: 38rpx 46rpx;
// 背景色
--picker-background-color: #FFFFFF;
// 头部文案区域元素的line-height
--picker-action-line-height: 44rpx;
// 标题font-size
--picker-title-font-size: 27rpx;
// 左右文案元素的font-size
--picker-action-button-font-size: 24rpx;
// 右侧文案元素 color
--picker-confirm-button-color: #3886F2;
// 左侧文案元素 color
--picker-cancel-button-color: #969799;
// 内容区域高度，可控制显示几行元素。
--picker-list-height: 200rpx;
// 滚动元素font-size
--picker-cell-font-size: 27rpx;
// 滚动元素color
--picker-cell-text-color: @text-color;
// 滚动元素当前居中元素的 color
--picker-cell-selected-text-color: @text-color;
// 分隔线高度
--picker-midline-size: 2rpx;
// 分隔线颜色
--picker-midline-color: #97979730;

FAQ