美文网首页
weui datepicker 最后一个年份的12月只有30号

weui datepicker 最后一个年份的12月只有30号

作者: 兔子不打地鼠打代码 | 来源:发表于2019-06-06 10:23 被阅读0次

    weui官方参考文档
    https://github.com/Tencent/weui.js/blob/master/docs/component/picker.md
    https://github.com/Tencent/weui/blob/master/README_cn.md

    在项目中关于到一个bug,直接使用weui的datepicker,年份限制在本年,但是12月却没有31号


    let picker = this.$weuijs.datePicker({
                defaultValue: this.currDate.split('-'),
                start: new Date(), // 从今天开始4d
                end: new Date().getFullYear(),
                onConfirm: (result) => {
                  this.currDate = result
                    .map(item => (+item.value < 10 ? `0${item.value}` : item.value))
                    .join('-')
                  this.showDate = `${result[1].label}`+ `${result[2].label}`
                  setTimeout(()=>{
                    this.selectTime(result)
                  }, 400)
                },
                id: 'datePicker'
              })
    

    方案一:(失败的方案)

    修改成
    终点就是 end: new Date(`Fri Dec 31 ${year} 23:59:99 GMT+0800 (中国标准时间)`),

              let year = new Date().getFullYear()
              let picker = this.$weuijs.datePicker({
                defaultValue: this.currDate.split('-'),
                start: new Date(), // 从今天开始4d
                end: new Date(`Fri Dec 31 ${year} 23:59:99 GMT+0800 (中国标准时间)`),
                onConfirm: (result) => {
                  this.currDate = result
                    .map(item => (+item.value < 10 ? `0${item.value}` : item.value))
                    .join('-')
                  this.showDate = `${result[1].label}`+ `${result[2].label}`
                  setTimeout(()=>{
                    this.selectTime(result)
                  }, 400)
                },
                id: 'datePicker'
              })
    

    方案一在电脑上运行没有问题,但是升级到微信上,发现页面就会卡死,这样子的写可能还是超出的时间范围。

    方案二

    然后直接指定开始和结束时间,一开始,我将结束时间改成‘2019-12-31’,但是发现并没有生效,
    然后我升级weui 从1.1.2到1.1.3,但是发现还是不生效;
    看了官方文档觉得起点时间和结束时间都应该同一类型
    所以将start改成了‘2019-01-01’就生效了
    ![](https:/
    /upload-images.jianshu.io/upload_images/2418690-bac1266f4a464bf8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    最终代码呈现如下,问题完美解决

    selectDate () {
              let today = this.mixin_time_get_today(true)
              let year = new Date().getFullYear()
              let picker = this.$weuijs.datePicker({
                defaultValue: this.currDate.split('-'),
                start: today, // 从今天开始4d
                end: `${year}-12-31`,
                onConfirm: (result) => {
                  this.currDate = result
                    .map(item => (+item.value < 10 ? `0${item.value}` : item.value))
                    .join('-')
                  this.showDate = `${result[1].label}`+ `${result[2].label}`
                  setTimeout(()=>{
                    this.selectTime(result)
                  }, 400)
                },
                id: 'datePicker'
              })
            },
    

    划重点:
    1、升级weui到1.1.3
    2、start和end都指定为字符串类型

    相关文章

      网友评论

          本文标题:weui datepicker 最后一个年份的12月只有30号

          本文链接:https://www.haomeiwen.com/subject/pzdyxctx.html