读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. 小程序
  3. 正文

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

2020年07月01日 220点热度 0人点赞 0条评论

小程序中的输入日期选择

官方提供的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属性,否则无效。

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 小程序
最后更新:2020年09月23日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
Echarts Nginx taro CSS 闲谈 redux mysql flutter JavaScript node canvas 随笔 react 阅读 小程序 悦读 vue git hook
推荐文章
  1. JavaScript时间处理方法总汇【在react中引用】
  2. 微信小程序中for循环里的picker,操作某一个picker 如何改变对应选择的值?
  3. 微信小程序中获取当前日期
  4. Flex弹性布局基础属性
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (40)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号