资讯专栏INFORMATION COLUMN

仿ios时间选择

dack / 1575人阅读

摘要:再得的基础上修改为类似选择时间的插件。普通示例年月月月年年年月日月的最后一天要加原本是从开始的但是因为是这个月的上个月所以到了上个月日日月月年年小时分钟效果图年月日小时分钟效果只有在手机端或者手机的手机模拟器中可以看到。

再mui得picker的基础上修改为类似ios选择时间的插件。
muipicker exapmple地址
把里面数据换成下面的数据就可以了。

(function($, doc) {
        $.init();
        $.ready(function() {
            //普通示例

//            年月
            var yearArray = new Array();
            for (var i = 0; i < 10; i ++) {
                var monthArray = new Array();
                for (var j = 0; j < 12; j ++) {
                    var month = new Object();
                    month.value = j + 1 + "月";
                    month.text = j + 1 + "月";
                    monthArray.push(month);
                }
                var year = new Object();
                year.value = i + 2016 + "年" ;
                year.text = i + 2016 + "年";
                year.children = monthArray;
                yearArray.push(year);
            };

//年月日
            var yearArray = new Array();
            for (var i = 0; i < 10; i ++) {
                var monthArray = new Array();
                for (var j = 0; j < 12; j ++) {
                    //月的最后一天
                    var year = i + 2016;
                    var month = j;
                    var lastDay = new Date(year, month + 1, 0).getDate();//month 要加1,原本month是从0开始的,但是因为0是这个月的上个月,所以到了上个月.
                    if(year == 2016 && month == 1) {
                        console.log("lastday" + lastDay);
                    }
                    var dayArray = new Array();
                    for(var k = 0; k < lastDay; k ++) {
                        var day = new Object();
                        day.value = k + 1 + "日";
                        day.text = k + 1 + "日";
                        dayArray.push(day);
                    }
                    var month = new Object();
                    month.children = dayArray;
                    month.value = j + 1 + "月";
                    month.text = j + 1 + "月";
                    monthArray.push(month);
                }
                var year = new Object();
                year.value = i + 2016 + "年" ;
                year.text = i + 2016 + "年";
                year.children = monthArray;
                yearArray.push(year);
            };
            console.log(yearArray);

//            小时分钟
            var hoursec = new Array();
            for (var i = 0; i < 24; i ++) {
                var hsChildrenArray = new Array();
                for (var j = 0; j < 60; j ++) {

                    var childrenObject = new Object();
                    var secTrue = j ;
                    if(j < 10) {
                        var secTrue = j ;
                        childrenObject.value = "0" + secTrue;
                        childrenObject.text = "0" + secTrue;
                    }else {
                        childrenObject.value = secTrue ;
                        childrenObject.text = secTrue;
                    }

                    hsChildrenArray.push(childrenObject);
                }

                var object = new Object();
                if(i < 10) {
                    object.value = "0" + i + ":" ;
                    object.text = "0" + i + ":";
                }else {
                    object.value = i +":" ;
                    object.text = i + ":";
                }
                object.children = hsChildrenArray;
                hoursec.push(object);
            };
        });
    })(mui, document);

效果图:


年月日


小时分钟

效果只有在手机端或者手机chrome的手机模拟器中可以看到。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78717.html

相关文章

发表评论

0条评论

最新活动
阅读需要支付1元查看
<