欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-12 14:49:36
...

小程序中的输入日期选择

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

小程序中picker底部弹出滚动选择器
获取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));

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

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>

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

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

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

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

相关标签: picker 小程序