@retailwe/ui-datetime-picker
v0.0.19
Published
### 使用效果
Downloads
30
Readme
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