很好看的选择栏控件,不多说 直接贴图
可以设置下行数和列数,显示的行的数量。还可以设置默认值。
下面是代码:
<script type="text/javascript">
//生成年月日时间数组。 方便time选择器的调用.
var now = new Date();
var nowYear = now.getFullYear();
var nowMonth = now.getMonth() + 1;
var nowDate = now.getDate();
function formatYear (nowYear) {
var arr = [];
for (var i = nowYear; i <= nowYear + 5; i++) {
arr.push({
id: i ,
value: i + '年'
});
}
return arr;
}
function formatMonth () {
var arr = [];
for (var i = 1; i <= 12; i++) {
arr.push({
id: i ,
value: i + '月'
});
}
return arr;
}
function formatDate (count) {
var arr = [];
for (var i = 1; i <= count; i++) {
arr.push({
id: i ,
value: i+ '日'
});
}
return arr;
}
var yearData = function(callback) {
callback(formatYear(nowYear))
}
var monthData = function (year, callback) {
callback(formatMonth());
};
var dateData = function (year, month, callback) {
if (/^(1|3|5|7|8|10|12)$/.test(month)) {
callback(formatDate(31));
}
else if (/^(4|6|9|11)$/.test(month)) {
callback(formatDate(30));
}
else if (/^2$/.test(month)) {
if (year % 4 === 0 && year % 100 !==0 || year % 400 === 0) {
callback(formatDate(29));
}
else {
callback(formatDate(28));
}
}
else {
throw new Error('month is illegal');
}
};
//选择器部分
function timeSelect () {
//三级联动
var bankSelect=new IosSelect(4,
[yearData, monthData, dateData , //每一个数组,对应一个列
[{'id':'0', 'value': '全天'},
{'id': '1', 'value': '上午'},
{'id': '2', 'value': '下午'},
{'id': '3', 'value': '晚上'}
]],
{
container: '.container',
relation: [1, 1, 0, 0],//每列之间关系,省市区三级联动需要用到
title: '日期选择',//显示名称
itemHeight: 50,//行高
itemShowCount: 3,//行数
oneLevelId: 1,//默认的第一行
twoLevelId: now.getMonth()+1,//默认第二行
threeLevelId: now.getDate(),//..
selectFourObj:0, //用来使用默认的显示位置. 如需要使用请选择,则在data文件中加入请选择序列号
callback: function (selectOneObj,selectTwoObj,selectThreeObj,selectFourObj) {
$("shipment_form._delivery_time").value = selectOneObj.value+selectTwoObj.value+selectThreeObj.value+selectFourObj.value;
$("shipment_form._loading_time_date").value = selectOneObj.id+"-"+selectTwoObj.id+"-"+selectThreeObj.id;
$("shipment_form._loading_time_period").value = selectFourObj.id;
//少一个hidden 放置日期
}
});
}
</script>
直接将上述function 放入到一个onclick时间中触发,导入三个依赖包(iosSelect.css
,iosSelect.js
,iscroll.js
),即可以使用。