时间选择器 DateTimePicker

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

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-datetime-picker": "@titian-design/weapp/datetime-picker/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-datetime-picker": "platform://titian-mp/ti-datetime-picker"
  }
}

用法示例

基础用法

弹出选择器

• App.wxml
• index.js

code

copy

code

<ti-button bind:click="toggle">弹出选择器</ti-button>
<ti-popup wx:if="visible" visible="{{visible}}" closeOnMask bind:close="toggle" position="bottom">
  <ti-datetime-picker/>
</ti-popup>

copy

code

Page({
  data: {
    visible: false,
  },
  toggle() {
    const { visible } = this.data;
    this.setData({ visible: !visible });
  },
});

选项格式化

弹出选择器

• App.wxml
• index.js

code

copy

code

<ti-button bind:click="toggle">弹出选择器</ti-button>
<ti-popup wx:if="visible" visible="{{visible}}" closeOnMask bind:close="toggle" position="bottom">
  <ti-datetime-picker formatter="{{formatter}}"/>
</ti-popup>

copy

code

Page({
  data: {
    visible: false,
    formatter(type, value) {
      const pipe = {
        year: `${value}年`,
        month: `${value}月`,
        day: `${value}天`,
        hour: `${value}时`,
        minute: `${value}分`,
      };
      return pipe[type];
    },
  },
  toggle() {
    const { visible } = this.data;
    this.setData({ visible: !visible });
  },
});

设置边界

弹出选择器

• App.wxml
• index.js

code

copy

code

<ti-button bind:click="toggle">弹出选择器</ti-button>
<ti-popup wx:if="{{visible}}" visible="{{visible}}" closeOnMask bind:close="toggle" position="bottom">
  <ti-datetime-picker
    value="{{value}}"
    maxDate="{{maxDate}}"
    minDate="{{minDate}}"
  />
</ti-popup>

copy

code

Page({
  data: {
    visible: false,
    value: new Date().getTime(),
    maxDate: new Date().setDate(new Date().getDate() + 1),
    minDate: new Date().setDate(new Date().getDate() - 1),
  },
  toggle() {
    const { visible } = this.data;
    this.setData({ visible: !visible });
  },
});

不同时间类型

Date 展示Time 展示DateTime 展示Year-Month 展示

• App.wxml
• index.js

code

copy

code

<ti-button data-type="date" bind:click="show">Date 展示</ti-button>
<ti-button data-type="time" bind:click="show">time 展示</ti-button>
<ti-button data-type="datetime" bind:click="show">DateTime 展示</ti-button>
<ti-button data-type="year-month" bind:click="show">Year-Month 展示</ti-button>
<ti-popup wx:if="{{visible}}" visible="{{visible}}" closeOnMask bind:close="toggle" position="bottom">
  <ti-datetime-picker type="{{type}}" bind:confirm="toggle"/>
</ti-popup>

copy

code

Page({
  data: {
    type: 'date',
    visible: false,
  },
  show(e) {
    const { visible } = this.data;
    this.setData({ visible: !visible, type: e.currentTarget.dataset.type });
  },
  toggle() {
    const { visible } = this.data;
    this.setData({ visible: !visible });
  },
});

选项过滤

弹出选择器

过滤为奇数的年份

• App.wxml
• index.js

code

copy

code

<ti-button bind:click="toggle">弹出选择器</ti-button>
<ti-popup wx:if="{{visible}}" visible="{{visible}}" closeOnMask bind:close="toggle" position="bottom">
  <ti-datetime-picker filter="{{filter}}"/>
</ti-popup>

copy

code

Page({
  data: {
    visible: false,
    filter(type, options) {
      if (type === 'year') {
        return options.filter(option => option.value % 2 === 0);
      }
      return options;
    },
  },
  toggle() {
    const { visible } = this.data;
    this.setData({ visible: !visible });
  },
});

时间项排序

弹出选择器

sort项取值应该和type类型对应

• App.wxml
• index.js

code

copy

code

<ti-button bind:click="toggle">弹出选择器</ti-button>
<ti-popup wx:if="{{visible}}" visible="{{visible}}" closeOnMask bind:close="toggle" position="bottom">
  <ti-datetime-picker sort="{{['month', 'year']}}" type="year-month"/>
</ti-popup>

copy

code

Page({
  data: {
    visible: false,
  },
  toggle() {
    const { visible } = this.data;
    this.setData({ visible: !visible });
  },
});

ti-datetime-picker API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
value	string	否	-	-	-
type	string	否	data	年月日date 年月year-month 时分time 年月日 - 时分datetime	-
min-date	number	否	十年前毫秒数	最小边界	-
max-date	number	否	十年后毫秒数	最大边界	-
sort	array	否	-	sort 需要与 type 匹配，匹配关系	-
loading	boolean	否	false	加载动画	-
formatter	function	否	-	格式化内容	-
filter	function	否	-	过滤时间	-
title	string	否	-	标题	-
sub-title	string	否	-	副标题	-
confirm-text	string	否	-	确认按钮文案	-
cancel-text	string	否	-	取消按钮文案	-
option-item-height	number | string	否	108	展示项高度	-
visible-item-count	number	否	5	可见展示项数	-
ext-style	string	否	-	容器样式	-
ext-option-style	string	否	-	子器样式	-

sort排序的取值和type对应关系

type	sort
date	['year', 'month', 'day']
year-month	['year', 'month']
time	['hour', 'minute']
datetime	['year', 'month', 'day', 'hour', 'minute']

事件 Events

名称	参数列表	描述	备注
bind:confirm	(e: WechatMiniprogram.CustomEvent<{type: string, value: number}>) => void	点击确定按钮后触发	-
bind:change	(e: WechatMiniprogram.CustomEvent<{type: string, value: number}) => void	列表变化是触发	-
bind:cancel	(e: WechatMiniprogram.CustomEvent<{type: string, value: number}) => void	点击取消按钮后触发	-

插槽 Slots

名称	说明	备注
header	titlebar下方区域	—

外部样式类 External Classes

名称	说明	备注
ext-hairline-class	时间选择器中间线样式	-
ext-mask-class	时间选择器蒙层样式	-
ext-option-class	时间选择器纵列容器样式	-
ext-option-item-class	时间选择器纵列单项样式	-
eext-class	时间选择容器样式	-

CSS 变量 CSS Variable

变量	默认值	说明	备注
--datetime-picker-mask-bg-image	#ffffff	同 picker 组件 --picker-mask-bg-image	-
--datetime-picker-loading-bg-color	#ffffff	同 picker 组件 --picker-loading-bg-color	-
--datetime-picker-row-color	#212121	同 picker-column 组件 --picker-column-row-color	-
--datetime-picker-row-selected-color	#212121	同 picker-column 组件 --picker-column-row-selected-color	-
--datetime-picker-row-disabled-color	#212121	同 picker-column 组件 --picker-column-row-disabled-color	-