jq weui 日期年月日时分秒得设置(二个弹窗)

上网导航 2023-08-19 272 0条评论
摘要: 需求:h5页面需要年月日时分秒,方法:weui得datePicker插件只有年月日得,所以时分秒就要单独用picker插件单独配置一个,网上有类似得...

需求:h5页面需要年月日时分秒,

方法:weui得datePicker插件只有年月日得,所以时分秒就要单独用picker插件单独配置一个,网上有类似得,难点就在于在第一个年月日关闭后就弹出时分秒得弹框,这个我是加在第一个弹框关闭得onClose里调用得时分秒弹框,网上也有其他方法,在我这里无效

不足:弹出二次弹框得体验

isWhichTime:function (timeSelector) {
    let _this=this;
    weui.datePicker({
        //end:2030,
        id: new Date(),//每次打开就是当天时间,而不是上一次选择得时间,因为源码里是如果上次有选择过,就显示上次选择得,这样如果是几个共用一个日期框,回显会有问题
        defaultValue: [new Date().getFullYear(), new Date().getMonth()+1, new Date().getDate()],
        onConfirm: result=> {
            //把年月份保存成全局变量
            _this.data.firstTime = result;
        },
        onClose:e=>{
            //二次调用时分秒
            _this.actions.secondPicker(_this, this.data.firstTime,timeSelector);
        }
    })
},

//二次调用日期:时分秒
secondPicker:function(_this,result,timeSelector){
    //统一格式  yyyy-mm-dd hh:mm:ss
    if (result[1].value<11) {
        result[1].value = '0'+ result[1].value;
    }
    if (result[2].value<11) {
        result[2].value = '0'+ result[2].value;
    }
  //统一格式  yyyy-mm-dd hh:mm:ss
    let dateTime = result[0].value+'-'+result[1].value+'-'+result[2].value+' ';
    let hours = [];
    let minite = [];
    let seconds = [];
    if(!hours.length) {
        hours=this.actions.costomDatePicker(hours,0,60,"时")
    }
    if(!minite.length) {
        minite=this.actions.costomDatePicker(minite,0,60,"分")
    }
    if(!seconds.length) {
        seconds=this.actions.costomDatePicker(seconds,0,60,"秒")
    }
    weui.picker(hours,minite,seconds,{
        //end:2030,
        id: new Date(),
        defaultValue: [new Date().getHours(),new Date().getMinutes(),new Date().getSeconds()],
        onConfirm: result=> {
            //result 是数组,返回得是当前选中得数,如[{lable:'2019年,value:2019},{lable:'2月,value:2},{lable:'2号,value:2}]
            if (result.length){
                 let time=dateTime+result[0].value+':'+result[1].value+':'+result[2].value;
                console.log('time',time)
                _this.el.find(timeSelector).val(time);
            }
        },
    })
},

月日时分秒得判断统一方法:

//自定义日期:月时分秒
costomDatePicker:function(years,startTime,endTime,str){
    for(let j = startTime; j < endTime; j++) {
       years.push({
            label: ('' + j).length === 1 ? '0'+j + str : '' + j + str,
            value: ('' + j).length === 1 ? '0'+j : '' + j ,
        });
    }
    return years;
},

文章版权及转载声明:

作者:上网导航本文地址:https://www.90xe.com/post/2225.html发布于 2023-08-19
文章转载或复制请以超链接形式并注明出处技术导航

分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏