html仿ios日期选择器,jQuery基于muipicker实现仿ios时间选择

首先我们先来看原始的muipicker的例子

.mui-btn {

font-size: 16px;

padding: 8px;

margin: 3px;

}

h5.mui-content-padded {

margin-left: 3px;

margin-top: 20px !important;

}

h5.mui-content-padded:first-child {

margin-top: 12px !important;

}

.ui-alert {

text-align: center;

padding: 20px 10px;

font-size: 16px;

}

picker(选择器)

原生 SELECT

item-1

item-2

item-3

item-4

item-5

原生 SELECT(选择框)在不同的设备上UI可能会有差异，并且不支持多级联动(多个 SELECT 可实现，但较麻烦)，故mui封装了picker组件，参见如下示例。

普通示例

一级选择示例 ...

级联示例

二级联动示例 ...

三级联动示例 ...

(function($, doc) {

$.init();

$.ready(function() {

//普通示例

var userPicker = new $.PopPicker();

userPicker.setData([{

value: 'ywj',

text: '董事长 叶文洁'

}, {

value: 'aaa',

text: '总经理 艾AA'

}, {

value: 'lj',

text: '罗辑'

}, {

value: 'ymt',

text: '云天明'

}, {

value: 'shq',

text: '史强'

}, {

value: 'zhbh',

text: '章北海'

}, {

value: 'zhy',

text: '庄颜'

}, {

value: 'gyf',

text: '关一帆'

}, {

value: 'zhz',

text: '智子'

}, {

value: 'gezh',

text: '歌者'

}]);

var showUserPickerButton = doc.getElementById('showUserPicker');

var userResult = doc.getElementById('userResult');

showUserPickerButton.addEventListener('tap', function(event) {

userPicker.show(function(items) {

userResult.innerText = JSON.stringify(items[0]);

//返回 false 可以阻止选择框的关闭

//return false;

});

}, false);

//-----------------------------------------

//级联示例

var cityPicker = new $.PopPicker({

layer: 2

});

cityPicker.setData(cityData);

var showCityPickerButton = doc.getElementById('showCityPicker');

var cityResult = doc.getElementById('cityResult');

showCityPickerButton.addEventListener('tap', function(event) {

cityPicker.show(function(items) {

cityResult.innerText = "你选择的城市是:" + items[0].text + " " + items[1].text;

//返回 false 可以阻止选择框的关闭

//return false;

});

}, false);

//-----------------------------------------

// //级联示例

var cityPicker3 = new $.PopPicker({

layer: 3

});

cityPicker3.setData(cityData3);

var showCityPickerButton = doc.getElementById('showCityPicker3');

var cityResult3 = doc.getElementById('cityResult3');

showCityPickerButton.addEventListener('tap', function(event) {

cityPicker3.show(function(items) {

cityResult3.innerText = "你选择的城市是:" + (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;

//返回 false 可以阻止选择框的关闭

//return false;

});

}, false);

});

})(mui, document);

在此基础上修改为类似ios选择时间的插件。

把里面数据换成下面的数据就可以了。

(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的手机模拟器中可以看到。