@retailwe/ui-datetime-picker

datetime-picker 日期时间选择器

使用效果

选择【年-月】

选择【年-月-日】

选择【年-月-日-时-分】

选择【时-分】

外部样式自定义

使用方法

// 脚本文件
Page({
  data: {
    isShow: false,
    showText1: '年月日',
    date: new Date().getTime(),
  },

  onTap(e) {
    this.handleTap(e, true);
  },

  close(e: any) {
    this.handleTap(e, false);
  },

  handleTap(e: any, isShow: boolean) {
    this.setData({
      isShow: isShow,
    });
  },
  onConfirm(e) {
    console.log('点击了确定按钮,修改的时间值为：', e);
    const newDate = new Date(e.detail);
    this.setData({
      isShow: false,
      showText1:
        newDate.getFullYear() +
        '年' +
        newDate.getMonth() +
        '月' +
        newDate.getDate() +
        '日',
    });
  },
  onCancel(e) {
    console.log('点击了取消按钮', e.detail);
    this.setData({
      isShow: false,
    });
  },
});

<!---wxml文件--->
<wr-datetime-picker title="年月日" type="date" value="{{date}}" isPop="{{isShow}}" bind:onCancel="onCancel" bind:onConfirm="onConfirm" picker-wrapper-class='my-picker-wrapper-class' title-class="my-title-class" cancel-btn-class='my-cancel-btn-class' confirm-btn-class='my-confirm-btn-class'></wr-datetime-picker>

参数说明

Props

参数	说明	要求	默认值
title	标题	string	选择日期
value	当前时间值	时间戳	new Date(),getTime()
type	选择器的类型：【年月日】、【时分】、【年月日时分】、【年月】	"date"|"time"|"date time"|"year-mouth"	"date"
rows	可见选项的行数，默认为3，不建议超过5	number	3
min-date	可选的最小时间，时间戳形式	时间戳	3年前
max-date	可选的最大时间，时间戳形式	时间戳	3年后
min-hour	可选的最小小时，针对 time 类型	0-23的整数类型	0
max-hour	可选的最大小时，针对time类型	0-23的整数类型	23
gap	间隔分钟数，针对time类型	0-30的整数类型	0

Events

事件	说明
change	时间值变化时触发
onConfirm	点击确定按钮时触发
onCancel	点击取消按钮时触发

外部样式类

类名	说明
confirm-btn-class	确定按钮的样式
cancel-btn-class	取消按钮的样式
picker-wrapper-class	选择器弹框样式
title-class	标题样式

注意⚠️

因小程序自身实现问题，为确保外部样式生效，建议加上!important