• 微信小程序picker 日期(年/月/日/时/分)选择器


    <view class="df yuding" style="padding:24rpx 0;">
      <view class="fs26">预计到店</view>
      <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
         <input value='{{time}}' name="dd_time" placeholder='选择时间' class="fs26 changetime"/>
      </picker>
     </view>
    const date = new Date();
    const years = [];
    const months = [];
    const days = [];
    const hours = [];
    const minutes = [];
    //获取年
    for (let i = date.getFullYear(); i <= date.getFullYear() + 1; 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(options) {
    //设置默认的年份
        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);
      },
    })

    效果

  • 相关阅读:
    __dict__
    谷歌浏览器如何清除当前页面的缓存
    博客园插入超链接时如何取消下划线
    杂七杂八
    博客园首页如何添加 Live 2D 模型
    访问 IIS 元数据库失败 的解决方法 .
    VS 关于无法打开项目文件,此安装不支持该项目类型的问题
    汉字转为unicode
    Windchill 预览效果偏向左边
    MD04
  • 原文地址:https://www.cnblogs.com/yun101/p/12533936.html
Copyright © 2020-2023  润新知