首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序- 选择器 合并时间和日期

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

作者头像
叉叉敌
发布2019-08-31 19:01:51
9090
发布2019-08-31 19:01:51
举报
文章被收录于专栏:ChasaysChasays

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/weixin_42514606/article/details/100129200

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);
},
})
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019年08月29日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • wxml
  • js
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档