黑马程序员技术交流社区

标题: 【上海校区】h5使用iosselect.js实现日期选择器datepicker [打印本页]

作者: 不二晨 时间: 2019-1-4 09:38
标题: 【上海校区】h5使用iosselect.js实现日期选择器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，欢迎留言讨论！
---------------------
转载，仅作分享，侵删
作者：肖波86440
原文：https://blog.csdn.net/u012962759/article/details/85562659

作者: 不二晨 时间: 2019-1-10 10:28

奈斯，加油

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2