DatePicker 日期/时间选择器

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-cell-group": "wuss-weapp/w-cell-group/index",
  3.   "w-date-picker": "wuss-weapp/w-date-picker/index"
  4. }

视频演示

代码演示

  1. <w-cell-group>
  2.   <w-date-picker
  3.     label="年月日"
  4.     title="请选择日期"
  5.     format="YYYY-MM-DD"
  6.     defaultValue="{{ date }}"
  7.     bind:onSelect="handleSelected"
  8.   />
  9.   <w-date-picker
  10.     label="年月日时分秒"
  11.     format="YYYY-MM-DD HH:mm:ss"
  12.     title="请选择日期"
  13.     defaultValue="{{ 1548487316805 }}"
  14.     bind:onSelect="handleSelected"
  15.   />
  16.   <w-date-picker
  17.     label="年月"
  18.     format="YYYY-MM"
  19.     title="请选择日期"
  20.     bind:onSelect="handleSelected"
  21.   />
  22.   <w-date-picker
  23.     label="年月日时分"
  24.     format="YYYY-MM-DD HH:mm"
  25.     title="请选择日期"
  26.     bind:onSelect="handleSelected"
  27.   />
  28.   <w-date-picker
  29.     label="年月日时"
  30.     format="YYYY-MM-DD HH"
  31.     title="请选择日期"
  32.     defaultValue="2019-03-14 09:26"
  33.     bind:onSelect="handleSelected"
  34.   />
  35. </w-cell-group>
  38. <w-pane desc="Time 时间选择器 HH:mm:ss" />
  39. <w-cell-group>
  40.   <w-date-picker
  41.     label="HH:mm:ss"
  42.     format="HH:mm:ss"
  43.     title="请选择时间"
  44.     bind:onSelect="handleSelected"
  45.   />
  46.   <w-date-picker
  47.     label="HH:mm"
  48.     format="HH:mm"
  49.     title="请选择时间"
  50.     bind:onSelect="handleSelected"
  51.   />
  52.   <w-date-picker
  53.     label="mm:ss"
  54.     format="mm:ss"
  55.     title="请选择时间"
  56.     bind:onSelect="handleSelected"
  57.   />
  58. </w-cell-group>
  61. <w-pane desc="设置默认值" />
  62. <w-cell-group>
  63.   <w-date-picker
  64.     label="mode = date"
  65.     title="请选择日期"
  66.     defaultValue="{{ 1548487316805 }}"
  67.     bind:onSelect="handleSelected"
  68.   />
  69. </w-cell-group>
  72. <w-pane desc="指定开始时间和结束时间" />
  73. <w-cell-group>
  74.   <w-date-picker
  75.     label="1990 ~ 2020"
  76.     startDate="1990"
  77.     endDate="2020"
  78.     title="请选择日期"
  79.     bind:onSelect="handleSelected"
  80.   />
  81. </w-cell-group>
  84. <w-pane desc="自定义后缀名" />
  85. <w-cell-group>
  86.   <w-date-picker
  87.     label="CH"
  88.     title="请选择日期"
  89.     startDate="1990"
  90.     endDate="2020"
  91.     suffixName="{{ ['年','月','日','时','分','秒'] }}"
  92.     bind:onSelect="handleSelected"
  93.   />
  94.   <w-date-picker
  95.     label="EN"
  96.     title="Please choose the time"
  97.     startDate="1990"
  98.     endDate="2020"
  99.     suffixName="{{ ['Y','M','D','h','m','s'] }}"
  100.     bind:onSelect="handleSelected"
  101.   />
  102. </w-cell-group>
  1. data: {
  2.   date: new Date('2019-03-13 18:10:50').format('YYYY-MM-DD HH:mm:ss'),
  3. },
  4. handleSelected(e) {
  5.   console.log(e);
  6. },

API

Attribute 属性

属性 说明 类型 默认值
format 要格式化的模板格式 YYYY-MM-DD HH:mm:ss String ‘YYYY-MM-DD’
label 标签名称 String -
title popup弹窗标题 String -
showValue 返回何种格式的时间类型 [formateDate/timestamp/date] String date
startDate 开始的年份 Number 1978
endDate 结束的年份 默认为当前的年份 Number new Date().getFullYear()
suffixName 每个column对应的后缀名称 Array [‘年’,’月’,’日’,’时’,’分’,’秒’]
defaultValue 设置初始化默认值,值可以为时间蹉、格式化后的字符串时间或数组格式的时间，如[‘2019年’,’09月’,’15号’,….] [String,Number,Array] [formateDate/timestamp/dateArray]
currentValue 动态设置值. *（需要动态设置请使用currentValue) any -
cancelTextColor picker取消文本的字体颜色 String -
cancelText picker取消文本 String 取消
confirmTextColor picker确认文本的字体颜色 String -
maskClosable 点击蒙层是否允许关闭 Boolean true
confirmText picker确认文本 String 确认
placeholder date picker的占位符文本 String -

Event 事件

事件名 说明 参数
onSelect 选中时触发的回调 e.detail.value

Slot 插槽

名称 说明

Class 自定义类名

类名 说明
wuss-class 根节点样式类