iosselect
Version:
iosselect for andriod and ios
138 lines (137 loc) • 4.64 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) {
// settimeout只是模拟异步请求，真实情况可以去掉
// setTimeout(function() {
callback(formatYear(nowYear))
// }, 2000)
}
var monthData = function (year, callback) {
// settimeout只是模拟异步请求，真实情况可以去掉
// setTimeout(function() {
callback(formatMonth());
// }, 2000);
};
var dateData = function (year, month, callback) {
// settimeout只是模拟异步请求，真实情况可以去掉
// setTimeout(function() {
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');
}
// }, 2000);
// ajax请求可以这样写
/*
$.ajax({
type: 'get',
url: '/example',
success: function(data) {
callback(data);
}
});
*/
};
selectDateDom.bind('click', function () {
var oneLevelId = showDateDom.attr('data-year');
var twoLevelId = showDateDom.attr('data-month');
var threeLevelId = showDateDom.attr('data-date');
var iosSelect = new IosSelect(3,
[yearData, monthData, dateData],
{
title: '地址选择',
itemHeight: 35,
oneLevelId: oneLevelId,
twoLevelId: twoLevelId,
threeLevelId: threeLevelId,
showLoading: true,
callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
showDateDom.attr('data-year', selectOneObj.id);
showDateDom.attr('data-month', selectTwoObj.id);
showDateDom.attr('data-date', selectThreeObj.id);
showDateDom.html(selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value);
}
});
});
</script>
</body>
</html>