博主在最近做的项目中用到一个功能,有一个下拉列表,内容为当前日期到之前半年的日期列表,格式为yyyy-MM-dd。之后在网上并未搜索到完整的解决方案,但是我想出了一个集众家之所长的解决方案,于是就有了本文。因为我做的工作只是结合到一起,所以算是转载的吧。切入正题。
边说边看代码。
首先在body里写一个select控件,给个id。
<body>
<select id="dateSelect">
</select>
</body>
其次在页面头部写js,使其在页面加载时就执行js函数给select填充内容。
<script>
//页面加载完成后,执行初始化操作
window.onload = function () {
//当前日期
var date = new Date();
//获取select元素
var dateSelectObj = document.getElementById("dateSelect");
var s1 = date.toLocaleDateString();
var s2 = setTime(-6);
var diff = DateDiff(s1, s2);
for (var i = 0; i <= diff; i++) {
//创建option子元素
var optionText = formateDate(date);
var optionElement = document.createElement("option");
optionElement.textContent = optionText;
optionElement.value = optionText;
dateSelectObj.appendChild(optionElement);
//日期减一个月
date.setDate(date.getDate() - 1);
}
};
</script>
之后是核心js函数,可以写在外部js文件里。
此函数作用是计算天数差,方便遍历添加option
//计算天数差的函数,通用
function DateDiff(startDate, endDate) {
var startTime = new Date(Date.parse(startDate)).getTime();
var endTime = new Date(Date.parse(endDate)).getTime();
var dates = Math.abs((startTime - endTime)) / (1000 * 60 * 60 * 24);
return dates;
}
此函数作用是设置结束日期,即当前日期到哪一天的所有天数
//设置结束时间
function setTime(mon) {
var d = new Date();
d.setMonth(d.getMonth() + mon);
return d.toLocaleDateString();
}
此函数作用是格式化输出的Date,格式为yyyy-MM-dd,也可以不用
//格式化Date
function formateDate(date) {
if (date instanceof Date) {
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate());
} else {
return "Error Date";
}
}
到这里就OK了,经测试,不支持IE浏览器,Google和Firefox最新版都支持。