JS实现下拉列表显示当前日期到之前半年的所有日期

来源：互联网发布：手机主题美化软件编辑：程序博客网时间：2024/06/11 18:06

博主在最近做的项目中用到一个功能，有一个下拉列表，内容为当前日期到之前半年的日期列表，格式为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，也可以不用

//格式化Datefunction formateDate(date) {    if (date instanceof Date) {        return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate());    } else {        return "Error Date";    }}

到这里就OK了，经测试，不支持IE浏览器，Google和Firefox最新版都支持。

0 0