之前有在weui datepicker在pc端无法正常使用，使用iOSSelect代替这篇文章中提到用iOSselect.js实现datepicker，但是没有上传例子，今天在这里上传一个实例给大家看看，如果有需要的可以直接用。
先看一下实例：datePicker.
源码下载：datePicker源码
效果图如下:
然后看看代码
html:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
html,
body {
height: 100%;
}
body {
background-color: #f8f9fa;
color: #000;
font-family: "Microsoft YaHei";
}
.bg {}
.item {
// padding: 30px 30px 50px;
}
</style>
<link rel="stylesheet" type="text/css" href="iosSelect/iosSelect.css" />
</head>
<body>
<div class="leftItem" style="overflow-x: auto; display: inline-block;line-height: 50px;height: 60px;">
<input class="weui-input minput" id="date" style="width: 300px;font-size: 15px;float: left;
text-align: center;height: 50px;line-height: 50px;" type="text" value="" readonly="true" />
</div>
<script src="js/jquery-2.1.4.js"></script>
<script src="iosSelect/iosSelect.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Utils.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var util = new Utils();
var dateStr;
var curentDate;
window.onload = function() {
// $("#itempop").popup();
dateStr = util.getNowFormatDate();
curentDate = util.getNowFormatDate();
initComponets();
}
var dateObj;
function initComponets() {
$("#date").val(dateStr);
$("#date").bind("click", function() {
var d = $("#date").val();
var maxArr = util.getDateArray(new Date().getTime());
var minArr = [1998, 01, 01];
var arrDefualt = d.split("-");
util.DatePicker(minArr, maxArr, arrDefualt, -1, function(year, month, date) {
dateStr = year + "-" + month + "-" + date;
$("#date").val(dateStr);
});
});
}
</script>
</body>Utils.js
function Utils() {
//获取当前时间，格式YYYY-MM-DD
this.getNowFormatDate = function() {
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate;
}
/**
* 根据毫秒数获取时间字符串，格式为YYYY-MM-DD
* @param t 时间毫秒数
*/
this.getFormatDate = function(t) {
var date = new Date(t);
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate;
}
/**
* 根据毫秒数获取日期数组，格式[YYYY,MM,DD]
* @param t 时间毫秒数
*/
this.getDateArray = function(t) {
var date = new Date(t);
var mArr = new Array();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
mArr.push(year);
mArr.push(month);
mArr.push(strDate);
return mArr;
}
/**
* 使用iosSelect 实现日期选择器
* @param minArr 设定的最小可选日期，格式为：[YYYY,MM,DD]
* @param maxArr 设定的最大可选日期，格式为：[YYYY,MM,DD]，当@param len不为-1时，按当前日期向后推len年
* @param defaultArr 设定的默认选中日期，格式为：[YYYY,MM,DD]
* @param len 为-1时不做运算，否则重新根据len计算最大可选日期
* @param callbc 日期选择回调，参数分别的年，月，日
* 注:当minArr 为空或者格式不对时，默认向前推50年作为起始选择日期
* 当maxArr 为空或者格式不对时并且len=-1，默认向后推50年作为起始选择日期
* 当defaultArr 为空或者格式不对时，默认选中日期为当前日期
*/
this.DatePicker = function(minArr, maxArr, defaultArr, len, callbc) {
var date = new Date();
// console.log(maxArr);
var _this = this;
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (len != -1) {
maxArr = [];
maxArr.push((year + len));
maxArr.push(month);
maxArr.push(strDate);
} else {
// console.log(" here0 "+(typeof maxArr != "undefined" ) + " "+(maxArr instanceof Array) );
if (typeof maxArr != "undefined" && maxArr instanceof Array && maxArr.length == 3) {
// console.log(" here "+(typeof maxArr != "undefined" ) + " "+(maxArr instanceof Array) );
} else {
maxArr = [];
maxArr.push(year + 50);
maxArr.push(month);
maxArr.push(strDate);
}
}
if (typeof defaultArr != "undefined" && defaultArr instanceof Array && defaultArr.length == 3) {
} else {
defaultArr = [];
defaultArr.push(year);
defaultArr.push(month);
defaultArr.push(strDate);
}
if (typeof minArr != "undefined" && minArr instanceof Array && minArr.length == 3) {
} else {
minArr = [];
minArr.push(year - 50);
minArr.push(month);
minArr.push(strDate);
}
var yearData = function(innerCallbc) {
innerCallbc(_this.InitYears(minArr[0], maxArr[0]));
};
var monthData = function(ye, innerCallbc) {
innerCallbc(_this.InitMonths(ye, maxArr[0], maxArr[1]));
};
var dateData = function(ye, mon, innerCallbc) {
// innerCallbc(_this.InitDays(ye,mo,maxArr[0],maxArr[1],maxArr[2]));
innerCallbc(_this.InitDays(ye, mon, maxArr[0], maxArr[1], maxArr[2]));
};
var iosSelect = new IosSelect(3,
[yearData, monthData, dateData], {
title: '请选择',
itemHeight: 35,
oneLevelId: defaultArr[0],
twoLevelId: defaultArr[1],
threeLevelId: defaultArr[2],
showLoading: false,
callback: function(selectOneObj, selectTwoObj, selectThreeObj) {
callbc(selectOneObj.value, selectTwoObj.value, selectThreeObj.value);
}
});
}
//计算DatePicker的年数组
this.InitYears = function(min, max) {
var arrY = new Array();
for (var i = min; i <= max; i++) {
arrY.push({
id: i,
value: i
});
}
return arrY;
}
//计算DatePicker的月数组
this.InitMonths = function(cYear, maxYear, maxMonth) {
var arrM = new Array();
var mM = 12;
if (cYear == maxYear) {
mM = maxMonth;
}
for (var i = 1; i <= mM; i++) {
arrM.push({
id: i,
value: i
});
}
return arrM;
}
//计算DatePicker的日数组
this.InitDays = function(cYear, cMonth, maxYear, maxMonth, maxDays) {
var isCurent = false;
var arrD = new Array();
var mDay = 31;
if (/^(1|3|5|7|8|10|12)$/.test(cMonth)) {
mDay = 31;
} else if (/^(4|6|9|11)$/.test(cMonth)) {
mDay = 30;
} else if (/^2$/.test(cMonth)) {
if (cYear % 4 === 0 && cYear % 100 !== 0 || cYear % 400 === 0) {
mDay = 29;
} else {
mDay = 28;
}
} else {
throw new Error('month is illegal');
}
if (cYear == maxYear && cMonth == maxMonth) {
mDay = maxDays;
}
for (var i = 1; i <= mDay; i++) {
arrD.push({
id: i,
value: i
});
}
return arrD;
}
}
,另外需要iOSselect的相关css与js，以及jQuery。
以上即可实现datepicker，欢迎留言讨论！