1.5.1 • Published 1 year ago
@wines/date-picker-view v1.5.1
@wines/date-picker-view
DatePickerView 日期选择器
嵌入页面的日期选择器。
使用指南
在 page.json 中引入组件
{
"navigationBarTitleText": "DatePickerView",
"usingComponents": {
"wux-segmented-control": "@wines/segmented-control",
"wux-date-picker-view": "@wines/date-picker-view"
}
}
示例
<view class="page">
<view class="page__hd">
<view class="page__title">DatePickerView</view>
<view class="page__desc">日期选择器</view>
</view>
<view class="page__bd">
<wux-segmented-control values="{{ ['zh_CN', 'zh_TW', 'en'] }}" bind:change="onChange" />
<view class="sub-title">Default {{ displayValue1 }}</view>
<wux-date-picker-view
lang="{{ lang }}"
value="{{ value1 }}"
data-index="1"
bind:valueChange="onValueChange"
/>
<view class="sub-title">Mode = date {{ displayValue2 }}</view>
<wux-date-picker-view
mode="date"
lang="{{ lang }}"
value="{{ value2 }}"
data-index="2"
bind:valueChange="onValueChange"
/>
<view class="sub-title">Mode = year {{ displayValue3 }}</view>
<wux-date-picker-view
mode="year"
lang="{{ lang }}"
value="{{ value3 }}"
data-index="3"
bind:valueChange="onValueChange"
/>
<view class="sub-title">Mode = month {{ displayValue4 }}</view>
<wux-date-picker-view
mode="month"
lang="{{ lang }}"
value="{{ value4 }}"
data-index="4"
bind:valueChange="onValueChange"
/>
<view class="sub-title">Mode = time {{ displayValue5 }}</view>
<wux-date-picker-view
mode="time"
lang="{{ lang }}"
value="{{ value5 }}"
data-index="5"
bind:valueChange="onValueChange"
/>
<view class="sub-title">Use12Hours & datetime {{ displayValue6 }}</view>
<wux-date-picker-view
use12Hours
mode="datetime"
lang="{{ lang }}"
value="{{ value6 }}"
data-index="6"
bind:valueChange="onValueChange"
/>
<view class="sub-title">Use12Hours & time {{ displayValue7 }}</view>
<wux-date-picker-view
use12Hours
mode="time"
lang="{{ lang }}"
value="{{ value7 }}"
data-index="7"
bind:valueChange="onValueChange"
/>
</view>
</view>
import './index.less';
import { DatePickerViewGetValue } from '@wines/date-picker-view';
function getDateString(date = new Date()) {
return {
year: String(date.getFullYear()),
month: String(date.getMonth()),
day: String(date.getDate()),
hour: String(date.getHours()),
minute: String(date.getMinutes()),
};
}
const { year, month, day, hour, minute } = getDateString();
Page({
data: {
value1: [year, month, day, hour, minute],
value2: [year, month, day],
value3: [year, month],
value4: [year],
value5: [hour, minute],
value6: [year, month, day, hour, minute, '1'],
value7: [hour, minute, '1'],
lang: 'zh_CN',
},
onChange(e) {
console.log(e);
const { key, values } = e.detail;
const lang = values[key];
this.setData({
lang,
});
},
setValue(values: DatePickerViewGetValue, key: number) {
this.setData({
[`value${key}`]: values.value,
[`displayValue${key}`]: values.displayValue.join(' '),
});
},
onValueChange(e) {
const { index } = e.currentTarget.dataset;
this.setValue(e.detail, index);
console.log(`onValueChange${index as number}`, e.detail);
},
});
API
DatePickerView props
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
multiPickerPrefixCls | string | multPicker 自定义类名前缀 | wux-picker |
pickerPrefixCls | string | picker 自定义类名前缀 | wux-picker-col |
value | any | 当前选中时间,例如字符串 2000-02-01 00:00:00 或时间戳 949334400000 或者数组 [2000, 1, 1, 0, 0] | - |
itemHeight | number | 每列子元素的高度 | 34 |
itemStyle | string,object | 每列子元素的样式 | - |
indicatorStyle | string,object | 设置选择器中间选中框的样式 | - |
indicatorClass | string | 设置选择器中间选中框的类名 | - |
maskStyle | string,object | 设置蒙层的样式 | - |
maskClass | string | 设置蒙层的类名 | - |
labelAlign | string | 设置文本对齐方式,可选值为 right、center、left | center |
mode | string | 日期选择的类型,可选值为 datetime、date、year、month、time | datetime |
minuteStep | number | 分钟数递增步长 | 1 |
use12Hours | boolean | 是否显示 12 小时制 | false |
minDate | any | 最小可选日期 | 2000-02-01 00:00:00 |
maxDate | any | 最大可选日期 | 2030-02-01 23:59:59 |
minHour | number | 最小可选小时 | 0 |
maxHour | number | 最大可选小时 | 23 |
minMinute | number | 最小可选分钟 | 0 |
maxMinute | number | 最大可选分钟 | 59 |
lang | string | 返回文本的语言,可选值为 en、zh_CN、zh_TW | zh_CN |
bind:valueChange | function | 每列数据选择变化后的回调函数 | - |