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

àì夳堔傛蜴生んèń 2024-04-17 16:58 66阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，66人围观）

还没有评论，来说两句吧...

相关阅读

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

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html 从底部弹起的滚动选择器。...

àì夳堔傛蜴生んèń/ 2024年04月17日 16:58/ 0 赞/ 67 阅读

相关微信小程序开发之选择器时间选择器日期选择器地区选择器

用微信封装好的控件感觉很好,为我们开发人员省去了很多麻烦.弊端就是不能做大量的自定义.今天试用了选择器. 上gif: ![Center][] 上代码: 1.index.

墨蓝/ 2023年02月27日 12:21/ 0 赞/ 57 阅读

相关微信小程序的时间选择器

小程序中 input 没有日期组件（只有picker组件带日期） <picker mode="date" value="{ {date}}" start="" end

╰+攻爆jí腚メ/ 2022年12月25日 03:00/ 0 赞/ 183 阅读

相关微信小程序的日期选择器

关于微信小程序中的日期选择器大家用过都会发现有个很大的问题，就是在2月的时候会有31天，没有进行对闰年的判断等各种情况。看了官方文档提供的源码后进行了一些修改，测试修复

客官°小女子只卖身不卖艺/ 2022年06月08日 12:54/ 0 赞/ 299 阅读

相关在微信小程序中实现时间日期的选择，并且显示当前选择的时间日期

< view class= '' >选择时间> </ view > < picker mode= "time" value= '\{ \{tim

待我称王封你为后i/ 2022年06月02日 00:13/ 0 赞/ 989 阅读

相关微信小程序----日期时间选择器(年月日时分秒)

<view class="tui-picker-content"> <view class="tui-picker-name">日期时间选择器（精确到秒）<

蔚落/ 2022年04月02日 11:42/ 0 赞/ 1204 阅读

相关微信小程序获取系统日期和时间：微信小程序教程系列17

获取当前系统日期和时间在小程序中，新建项目时，就会有一个utils.js文件，就是获取日期和时间的，代码如下： utils.js： function fo

旧城等待，/ 2021年12月03日 13:31/ 0 赞/ 706 阅读

相关微信小程序~日期时间戳转换

utils.js const formatTime = date => { const year = date.getFullYear() c

àì夳堔傛蜴生んèń/ 2021年10月30日 07:26/ 0 赞/ 916 阅读

相关微信小程序、mpvue小程序 picker-view日期选择器的使用

因为小程序自带的picker日期选择器样式等不能够自定义，所以我使用了picker-view，可以自定义样式。本示例是使用mpvue开发的微信小程序，适用于微信小程序（自己稍

- 日理万妓/ 2021年09月17日 04:36/ 0 赞/ 484 阅读

相关微信小程序picker日期-时间段选择

\--------今天休息跟大家分享一下在开发小程序遇到的时间选择这块的代码;当前时间的格式为：月+日+点+分+点+分 \--------代码复制即可用，也可以直接下载gi

古城微笑少年丶/ 2021年07月24日 23:16/ 0 赞/ 861 阅读