iosselect
Version:
iosselect for andriod and ios
158 lines (157 loc) • 5.48 kB
HTML
<head>
<title>年月日时分秒选择器</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../src/iosSelect.css">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?b25bf95dd99f58452db28b1e99a1a46f";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<a href="https://github.com/zhoushengmufc/iosselect">查看文档</a>
<div class="form-item item-line" id="selectDate">
<label>时间选择器</label>
<div class="pc-box">
<span data-year="" data-month="" data-date="" id="showDate">点击这里选择时间</span>
</div>
</div>
</body>
<script src="zepto.js"></script>
<script src="../../src/iosSelect.js"></script>
<script type="text/javascript">
var selectDateDom = $('#selectDate');
var showDateDom = $('#showDate');
// 初始化时间
var now = new Date();
var nowYear = now.getFullYear();
var nowMonth = now.getMonth() + 1;
var nowDate = now.getDate();
showDateDom.attr('data-year', nowYear);
showDateDom.attr('data-month', nowMonth);
showDateDom.attr('data-date', nowDate);
// 数据初始化
function formatYear (nowYear) {
var arr = [];
for (var i = nowYear - 5; 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');
}
};
var hourData = function(one, two, three, callback) {
var hours = [];
for (var i = 0,len = 24; i < len; i++) {
hours.push({
id: i,
value: i + '时'
});
}
callback(hours);
};
var minuteData = function(one, two, three, four, callback) {
var minutes = [];
for (var i = 0, len = 60; i < len; i++) {
minutes.push({
id: i,
value: i + '分'
});
}
callback(minutes);
};
var secondsData = function(one, two, three, four, five, callback) {
var seconds = [];
for (var i = 0, len = 60; i < len; i++) {
seconds.push({
id: i,
value: i + '秒'
});
}
callback(seconds);
};
selectDateDom.bind('click', function () {
var oneLevelId = showDateDom.attr('data-year');
var twoLevelId = showDateDom.attr('data-month');
var threeLevelId = showDateDom.attr('data-date');
var fourLevelId = showDateDom.attr('data-hour');
var fiveLevelId = showDateDom.attr('data-minute');
var sixLevelId = showDateDom.attr('data-second');
var iosSelect = new IosSelect(6,
[yearData, monthData, dateData, hourData, minuteData, secondsData],
{
title: '时间选择',
itemHeight: 35,
itemShowCount: 9,
oneLevelId: oneLevelId,
twoLevelId: twoLevelId,
threeLevelId: threeLevelId,
fourLevelId: fourLevelId,
fiveLevelId: fiveLevelId,
sixLevelId: sixLevelId,
callback: function (selectOneObj, selectTwoObj, selectThreeObj, selectFourObj, selectFiveObj, selectSixObj) {
showDateDom.attr('data-year', selectOneObj.id);
showDateDom.attr('data-month', selectTwoObj.id);
showDateDom.attr('data-date', selectThreeObj.id);
showDateDom.attr('data-hour', selectFourObj.id);
showDateDom.attr('data-minute', selectFiveObj.id);
showDateDom.attr('data-second', selectSixObj.id);
showDateDom.html(selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value + ' ' + selectFourObj.value + ' ' + selectFiveObj.value + ' ' + selectSixObj.value);
}
});
});
</script>
</body>
</html>