小程序中的输入日期选择
官方提供的picker标签，从底部弹出的滚动选择器
mode属性
选择器的类型：
| 属性值 | 描述 |
|---|---|
| date | 日期选择器 |
| time | 时间选择器 |
| region | 省市区选择器 |
| selector | 普通选择器 |
| multiSelector | 多列选择器 |
如果不限制时间段，则不需要设置“end”和“start”两个属性。
wxml:
<view class="apply-certificate-type flex ">
<view class="colorD8">选择日期：</view>
<picker bindchange="bindDateChange" class="flex-center" mode="date" start="{{date}}" end="{{endDate}}" data-type="vouchertype" value="{{date}}">
<view class="picker flex color2D">
{{date}}
<view class="flex-center">
<image src="../../images/arrow.png"></image>
</view>
</view>
</picker>
</view>
js:
onLoad: function(e) {
this.setData({
date: getNowFormatDate(),
endDate: lastTime
})
}
bindDateChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
console.log(this.data.date)
}
获取当前日期
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate;
}
获取N天后的日期
let todday = new Date().getTime();
//将2019-02-23T08:40:35.825Z格式转化为2019-02-23
const formatTime = function(time) {
return new Date(time).toISOString().split("T")[0];
}
//设置多少天后的日期
const getTimeByDay = function(num) {
return todday + 60 * 60 * 1000 * 24 * num
}
//例如一个月后的日期
let lastTime = formatTime(getTimeByDay(30));
fields属性
属性值为：year、month和day,官方说是选择器的粒度（粒度是系统内存扩展增量的最小值,这里就是时间的精确值）,如下：
<view class="section">
<view class="section__title">测试</view>
<picker mode="date" fields="month" bindchange="bindDateChange" custom-item="{{customItem}}">
<view class="picker">
当前选择：{{date}}
</view>
</picker>
</view>
这里就记录自己曾经踩的坑
range-key
当range的值是一个对象数组时（Object Array），range-key指定对象中的key作为选择器的数据，如一下代码：
wxml：
<view class="section">
<view class="section__title">测试</view>
<picker range-key="{{'add'}}" range="{{objectarray}}" bindchange="bindPickerRangeKey" value="{{index}}" >
<view class="picker">
当前选择：{{objectarray[indexRangeKey].add}}
</view>
</picker>
</view>
js:
data:{
objectarray:[
{
add:1,
money:"￥235"
},
{
add: 91,
money: "￥265"
},
{
add: 7,
money: "￥245"
},
{
add: 3,
money: "￥235"
},
{
add: 4,
money: "￥435"
},
{
add: 12,
money: "￥630"
}
],
indexRangeKey:0
},
bindPickerRangeKey: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
indexRangeKey: e.detail.value
})
},
注意：range-key属性值是object中的key，需要带上引号，并且要设置range属性，否则无效。
