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

博主在最近做的项目中用到一个功能,有一个下拉列表,内容为当前日期到之前半年的日期列表,格式为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最新版都支持。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值