weui 用picker自定义年月日时分秒(一个弹框)

本文介绍如何使用WeUI的picker组件创建一个自定义的日期时间选择器,实现年、月、日、时、分、秒的选择功能。但存在月份切换时日期未根据实际月份天数调整的问题,特别是涉及跨月选择时。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求:h5页面做成移动端需要年月份时分秒得弹框

方法:用weui得picker自定义年月日时分秒

不足:上下选择月份的时候,日期不能根据月份调整成该月该有得天数,因为统一给了31天,我也做了闰年得判断,但是发现只有打开得当月才有判断,比如4月份判断了只有30天,如果4月份想选择3月份得31号,发现没有这一天

 

 

代码:

isWhichTime:function (timeSelector) {
    let years = [];
    let mouth =[];
    let date = [];
    let hours = [];
    let minite = [];
    let seconds = [];
    if(!years.length&&!mouth.length) {
        for(let i = 1889; i <= 2030; i++) {
            years.push({
                label: i +"年" ,
                 value: i
               });
       }
    }
    if (!mouth.length) {
        mouth = this.actions.costomDatePicker(mouth,1,13,"月" )
    }
    if(!date.length) {
        date = this.actions.costomDatePicker(date,1,32,"日" )
    }
    if(!hours.length) {
        hours=this.actions.costomDatePicker(hours,0,24,"时")
    }
    if(!minite.length) {
        minite=this.actions.costomDatePicker(minite,0,60,"分")
    }
    if(!seconds.length) {
        seconds=this.actions.costomDatePicker(seconds,0,60,"秒")
    }

    weui.picker(years,mouth,date,hours,minite,seconds,{
        //end:2030,
        id: new Date(),//让每一个点击弹框得都有一个不一样得id,这样就避免了共用一个弹框得时候,打开得日期是上一次另外一个得日期回显
        defaultValue: [new Date().getFullYear(), new Date().getMonth()+1, new Date().getDate(),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){
                //yyyy-mm-dd hh:mm:ss
                let time=result[0].value+'-'+result[1].value+'-'+result[2].value+' '+result[3].value+':'+result[4].value+':'+result[5].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;
},

 

weui中,可以使用picker组件来实现时分秒时间选择。具体步骤如下: 1. 引入weui的css和js文件。 ```html <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.0.1/weui.min.css"/> <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script> ``` 2. 在页面中添加一个input元素作为触发选择器的按钮,并为其添加data-picker属性。 ```html <input class="weui-input" type="text" placeholder="请选择时间" readonly data-picker="#time-picker"> ``` 3. 在页面中添加一个隐藏的div元素作为选择器,并为其设置id。 ```html <div id="time-picker" class="weui-picker weui-hide"> <div class="weui-picker__hd"> <a href="javascript:;" class="weui-picker__action">取消</a> <a href="javascript:;" class="weui-picker__action">确定</a> </div> <div class="weui-picker__bd"> <div class="weui-picker__group"> <div class="weui-picker__item">时</div> <div class="weui-picker__item">分</div> <div class="weui-picker__item">秒</div> </div> <div class="weui-picker__group"> <div class="weui-picker__item">01</div> <div class="weui-picker__item">02</div> <!-- ... --> <div class="weui-picker__item">23</div> </div> <div class="weui-picker__group"> <div class="weui-picker__item">00</div> <div class="weui-picker__item">01</div> <!-- ... --> <div class="weui-picker__item">59</div> </div> <div class="weui-picker__group"> <div class="weui-picker__item">00</div> <div class="weui-picker__item">01</div> <!-- ... --> <div class="weui-picker__item">59</div> </div> </div> </div> ``` 4. 在页面中添加以下js代码,初始化选择器。 ```js weui.datePicker({ id: '#time-picker', onChange: function (result) { console.log(result); }, onConfirm: function (result) { console.log(result); } }); ``` 这样就可以在页面中实现一个简单的时分秒时间选择器。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值