小程序中picker底部弹出滚动选择器

小程序中的输入日期选择

官方提供的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>

这里就记录自己曾经踩的坑

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属性，否则无效。