小程序专栏

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

读心悦 · 7月1日 · 2020年 本文2544字 · 阅读7分钟174

小程序中的输入日期选择

官方提供的picker标签,从底部弹出的滚动选择器

mode属性

选择器的类型:

属性值 描述
date 日期选择器
time 时间选择器
region 省市区选择器
selector 普通选择器
multiSelector 多列选择器

如果不限制时间段,则不需要设置“end”和“start”两个属性。

wxml:

<code>  <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>
</code>

js:

<code>  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)
  }
</code>

获取当前日期

<code>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;
}
</code>

小程序中picker底部弹出滚动选择器-读心悦
获取N天后的日期

<code>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));

</code>

小程序中picker底部弹出滚动选择器-读心悦

fields属性

属性值为:year、month和day,官方说是选择器的粒度(粒度是系统内存扩展增量的最小值,这里就是时间的精确值),如下:

<code><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>
</code>

小程序中picker底部弹出滚动选择器-读心悦

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

fields属性

属性值为:year、month和day,官方说是选择器的粒度(粒度是系统内存扩展增量的最小值,这里就是时间的精确值),如下:

<code><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>
</code>

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

range-key

当range的值是一个对象数组时(Object Array),range-key指定对象中的key作为选择器的数据,如一下代码:
wxml:

<code><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>
</code>

js:

<code>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
    })
  },
</code>

小程序中picker底部弹出滚动选择器-读心悦
注意:range-key属性值是object中的key,需要带上引号,并且要设置range属性,否则无效。

0 条回应

×