微信小程序> 微信小程序选择器合并时间和日期

微信小程序选择器合并时间和日期

浏览量:721 时间: 来源:叉叉敌

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

从底部弹起的滚动选择器。类型有普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器。

没有现成的时间和日期合并在一起的,从demo里面可以看到 可以用多列选择器来实现。

wxml

  picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"    input value='{{time}}' placeholder='选择时间'/  /picker

js

const date = new Date();const years = [];const months = [];const days = [];const hours = [];const minutes = [];//获取年for (let i = 2018; i = date.getFullYear() + 5; i++) {years.push("" + i);}//获取月份for (let i = 1; i = 12; i++) {if (i  10) {  i = "0" + i;}months.push("" + i);}//获取日期for (let i = 1; i = 31; i++) {if (i  10) {  i = "0" + i;}days.push("" + i);}//获取小时for (let i = 0; i  24; i++) {if (i  10) {  i = "0" + i;}hours.push("" + i);}//获取分钟for (let i = 0; i  60; i++) {if (i  10) {  i = "0" + i;}minutes.push("" + i);}Page({data: {  time: '',  multiArray: [years, months, days, hours, minutes],  multiIndex: [0, 9, 16, 10, 17],  choose_year: '',},onLoad: function() {  //设置默认的年份  this.setData({    choose_year: this.data.multiArray[0][0]  })},//获取时间日期bindMultiPickerChange: function(e) {  // console.log('picker发送选择改变,携带值为', e.detail.value)  this.setData({    multiIndex: e.detail.value  })  const index = this.data.multiIndex;  const year = this.data.multiArray[0][index[0]];  const month = this.data.multiArray[1][index[1]];  const day = this.data.multiArray[2][index[2]];  const hour = this.data.multiArray[3][index[3]];  const minute = this.data.multiArray[4][index[4]];  // console.log(`${year}-${month}-${day}-${hour}-${minute}`);  this.setData({    time: year + '-' + month + '-' + day + ' ' + hour + ':' + minute  })  // console.log(this.data.time);},//监听picker的滚动事件bindMultiPickerColumnChange: function(e) {  //获取年份  if (e.detail.column == 0) {    let choose_year = this.data.multiArray[e.detail.column][e.detail.value];    console.log(choose_year);    this.setData({      choose_year    })  }  //console.log('修改的列为', e.detail.column, ',值为', e.detail.value);  if (e.detail.column == 1) {    let num = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);    let temp = [];    if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判断31天的月份      for (let i = 1; i = 31; i++) {        if (i  10) {          i = "0" + i;        }        temp.push("" + i);      }      this.setData({        ['multiArray[2]']: temp      });    } else if (num == 4 || num == 6 || num == 9 || num == 11) { //判断30天的月份      for (let i = 1; i = 30; i++) {        if (i  10) {          i = "0" + i;        }        temp.push("" + i);      }      this.setData({        ['multiArray[2]']: temp      });    } else if (num == 2) { //判断2月份天数      let year = parseInt(this.data.choose_year);      console.log(year);      if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {        for (let i = 1; i = 29; i++) {          if (i  10) {            i = "0" + i;          }          temp.push("" + i);        }        this.setData({          ['multiArray[2]']: temp        });      } else {        for (let i = 1; i = 28; i++) {          if (i  10) {            i = "0" + i;          }          temp.push("" + i);        }        this.setData({          ['multiArray[2]']: temp        });      }    }    console.log(this.data.multiArray[2]);  }  var data = {    multiArray: this.data.multiArray,    multiIndex: this.data.multiIndex  };  data.multiIndex[e.detail.column] = e.detail.value;  this.setData(data);},})

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎