原生js日期选择

于 2019-09-20 10:17:54 发布
阅读量644 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： Html+Javascript
原文链接：https://blog.youkuaiyun.com/WuLex
本文介绍了一个使用原生JS实现的日期选择组件，无需依赖其他框架类库，支持IE6、Firefox、Opera等浏览器。组件允许用户通过点击输入框弹出日期选择面板，提供了年份和月份的下拉选择功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>原生js日期选择</title>
    <script type="text/javascript" src="js/calenderJS.js"></script>
</head>
<body>
<h1>日期选择</h1>
<table width="400" height="150" border="2">
    <tbody>
    <tr>
        <td>文本文本文本</td>
        <td>点击输入框</td>
        <td>文本文本文本</td>
    </tr>
    <tr>
        <td>点击输入框</td>
        <td>
            <input style="width: 70px; cursor: text" onfocus="HS_setDate(this)" type="text">文本
        </td>
        <td>文本文本文本</td>
    </tr>
    <tr>
        <td>文本文本文本</td>
        <td>点击输入框</td>
        <td>
            <input style="width: 70px; cursor: text" onfocus="HS_setDate(this)" type="text">文本
        </td>
    </tr>
    </tbody>
</table>
<ul>
    <li>不需要其他框架类库</li>
    <li>支持ie6、firefox、opera</li>
    <li>点击年份与月份可以下拉选择</li>
</ul>

</body>
</html>

calenderJS.js

function HS_DateAdd(interval, number, date) {
    number = parseInt(number);
    if (typeof(date) == "string") {
        var date = new Date(date.split("-")[0], date.split("-")[1], date.split("-")[2])
    }
    if (typeof(date) == "object") {
        var date = date
    }
    switch (interval) {
    case "y":
        return new Date(date.getFullYear() + number, date.getMonth(), date.getDate());
        break;
    case "m":
        return new Date(date.getFullYear(),
            date.getMonth() + number,
            checkDate(date.getFullYear(), date.getMonth() + number, date.getDate()));
        break;
    case "d":
        return new Date(date.getFullYear(), date.getMonth(), date.getDate() + number);
        break;
    case "w":
        return new Date(date.getFullYear(), date.getMonth(), 7 * number + date.getDate());
        break;
    }
}

function checkDate(year, month, date) {
    var enddate = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];
    var returnDate = "";
    if (year % 4 == 0) {
        enddate[1] = "29"
    }
    if (date > enddate[month]) {
        returnDate = enddate[month]
    } else {
        returnDate = date
    }
    return returnDate;
}

function WeekDay(date) {
    var theDate;
    if (typeof(date) == "string") {
        theDate = new Date(date.split("-")[0], date.split("-")[1], date.split("-")[2]);
    }
    if (typeof(date) == "object") {
        theDate = date
    }
    return theDate.getDay();
}

function HS_calender() {
    var lis = "";
    var style = "";
    /*可以把下面的css剪切出去独立一个css文件*/
    style += "<style type='text/css'>";
    style +=
        ".calender { width:170px; height:auto; font-size:12px; margin-right:14px; background:url(calenderbg.gif) no-repeat right center #fff; border:1px solid #397EAE; padding:1px}";
    style += ".calender ul {list-style-type:none; margin:0; padding:0;}";
    style += ".calender .day { background-color:#EDF5FF; height:20px;}";
    style +=
        ".calender .day li,.calender .date li{ float:left; width:14%; height:20px; line-height:20px; text-align:center}";
    style += ".calender li a { text-decoration:none; font-family:Tahoma; font-size:11px; color:#333}";
    style += ".calender li a:hover { color:#f30; text-decoration:underline}";
    style += ".calender li a.hasArticle {font-weight:bold; color:#f60 !important}";
    style += ".lastMonthDate, .nextMonthDate {color:#bbb;font-size:11px}";
    style += ".selectThisYear a, .selectThisMonth a{text-decoration:none; margin:0 2px; color:#000; font-weight:bold}";
    style += ".calender .LastMonth, .calender .NextMonth{ text-decoration:none; color:#000; font-size:18px; font-weight:bold; line-height:16px;}";
    style += ".calender .LastMonth { float:left;}";
    style += ".calender .NextMonth { float:right;}";
    style += ".calenderBody {clear:both}";
    style += ".calenderTitle {text-align:center;height:20px; line-height:20px; clear:both}";
    style += ".today { background-color:#ffffaa;border:1px solid #f60; padding:2px}";
    style += ".today a { color:#f30; }";
    style += ".calenderBottom {clear:both; border-top:1px solid #ddd; padding: 3px 0; text-align:left}";
    style += ".calenderBottom a {text-decoration:none; margin:2px !important; font-weight:bold; color:#000}";
    style += ".calenderBottom a.closeCalender{float:right}";
    style +=
        ".closeCalenderBox {float:right; border:1px solid #000; background:#fff; font-size:9px; width:11px; height:11px; line-height:11px; text-align:center;overflow:hidden; font-weight:normal !important}";
    style += "</style>";

    var now;
    if (typeof(arguments[0]) == "string") {
        selectDate = arguments[0].split("-");
        var year = selectDate[0];
        var month = parseInt(selectDate[1]) - 1 + "";
        var date = selectDate[2];
        now = new Date(year, month, date);
    } else if (typeof(arguments[0]) == "object") {
        now = arguments[0];
    }
    var lastMonthEndDate = HS_DateAdd("d", "-1", now.getFullYear() + "-" + now.getMonth() + "-01").getDate();
    var lastMonthDate = WeekDay(now.getFullYear() + "-" + now.getMonth() + "-01");
    var thisMonthLastDate =
        HS_DateAdd("d", "-1", now.getFullYear() + "-" + (parseInt(now.getMonth()) + 1).toString() + "-01");
    var thisMonthEndDate = thisMonthLastDate.getDate();
    var thisMonthEndDay = thisMonthLastDate.getDay();
    var todayObj = new Date();
    today = todayObj.getFullYear() + "-" + todayObj.getMonth() + "-" + todayObj.getDate();

    for (i = 0; i < lastMonthDate; i++) { // Last Month's Date
        lis = "<li class='lastMonthDate'>" + lastMonthEndDate + "</li>" + lis;
        lastMonthEndDate--;
    }
    for (i = 1; i <= thisMonthEndDate; i++) { // Current Month's Date

        if (today == now.getFullYear() + "-" + now.getMonth() + "-" + i) {
            var todayString = now.getFullYear() + "-" + (parseInt(now.getMonth()) + 1).toString() + "-" + i;
            lis += "<li><a href=javascript:void(0) class='today' οnclick='_selectThisDay(this)' title='" +
                now.getFullYear() +
                "-" +
                (parseInt(now.getMonth()) + 1) +
                "-" +
                i +
                "'>" +
                i +
                "</a></li>";
        } else {
            lis += "<li><a href=javascript:void(0) οnclick='_selectThisDay(this)' title='" +
                now.getFullYear() +
                "-" +
                (parseInt(now.getMonth()) + 1) +
                "-" +
                i +
                "'>" +
                i +
                "</a></li>";
        }

    }
    var j = 1;
    for (i = thisMonthEndDay; i < 6; i++) { // Next Month's Date
        lis += "<li class='nextMonthDate'>" + j + "</li>";
        j++;
    }
    lis += style;

    var CalenderTitle = "<a href='javascript:void(0)' class='NextMonth' οnclick=HS_calender(HS_DateAdd('m',1,'" +
        now.getFullYear() +
        "-" +
        now.getMonth() +
        "-" +
        now.getDate() +
        "'),this) title='Next Month'>&raquo;</a>";
    CalenderTitle += "<a href='javascript:void(0)' class='LastMonth' οnclick=HS_calender(HS_DateAdd('m',-1,'" +
        now.getFullYear() +
        "-" +
        now.getMonth() +
        "-" +
        now.getDate() +
        "'),this) title='Previous Month'>&laquo;</a>";
    CalenderTitle +=
        "<span class='selectThisYear'><a href='javascript:void(0)' οnclick='CalenderselectYear(this)' title='Click here to select other year' >" +
        now.getFullYear() +
        "</a></span>年<span class='selectThisMonth'><a href='javascript:void(0)' οnclick='CalenderselectMonth(this)' title='Click here to select other month'>" +
        (parseInt(now.getMonth()) + 1).toString() +
        "</a></span>月";

    if (arguments.length > 1) {
        arguments[1].parentNode.parentNode.getElementsByTagName("ul")[1].innerHTML = lis;
        arguments[1].parentNode.innerHTML = CalenderTitle;

    } else {
        var CalenderBox = style +
            "<div class='calender'><div class='calenderTitle'>" +
            CalenderTitle +
            "</div><div class='calenderBody'><ul class='day'><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><ul class='date' id='thisMonthDate'>" +
            lis +
            "</ul></div><div class='calenderBottom'><a href='javascript:void(0)' class='closeCalender' οnclick='closeCalender(this)'>&times;</a><span><span><a href=javascript:void(0) οnclick='_selectThisDay(this)' title='" +
            todayString +
            "'>Today</a></span></span></div></div>";
        return CalenderBox;
    }
}

function _selectThisDay(d) {
    var boxObj = d.parentNode.parentNode.parentNode.parentNode.parentNode;
    boxObj.targetObj.value = d.title;
    boxObj.parentNode.removeChild(boxObj);
}

function closeCalender(d) {
    var boxObj = d.parentNode.parentNode.parentNode;
    boxObj.parentNode.removeChild(boxObj);
}

function CalenderselectYear(obj) {
    var opt = "";
    var thisYear = obj.innerHTML;
    for (i = 1970; i <= 2020; i++) {
        if (i == thisYear) {
            opt += "<option value=" + i + " selected>" + i + "</option>";
        } else {
            opt += "<option value=" + i + ">" + i + "</option>";
        }
    }
    opt = "<select οnblur='selectThisYear(this)' οnchange='selectThisYear(this)' style='font-size:11px'>" +
        opt +
        "</select>";
    obj.parentNode.innerHTML = opt;
}

function selectThisYear(obj) {
    HS_calender(obj.value +
        "-" +
        obj.parentNode.parentNode.getElementsByTagName("span")[1].getElementsByTagName("a")[0].innerHTML +
        "-1",
        obj.parentNode);
}

function CalenderselectMonth(obj) {
    var opt = "";
    var thisMonth = obj.innerHTML;
    for (i = 1; i <= 12; i++) {
        if (i == thisMonth) {
            opt += "<option value=" + i + " selected>" + i + "</option>";
        } else {
            opt += "<option value=" + i + ">" + i + "</option>";
        }
    }
    opt = "<select οnblur='selectThisMonth(this)' οnchange='selectThisMonth(this)' style='font-size:11px'>" +
        opt +
        "</select>";
    obj.parentNode.innerHTML = opt;
}

function selectThisMonth(obj) {
    HS_calender(obj.parentNode.parentNode.getElementsByTagName("span")[0].getElementsByTagName("a")[0].innerHTML +
        "-" +
        obj.value +
        "-1",
        obj.parentNode);
}

function HS_setDate(inputObj) {
    var calenderObj = document.createElement("span");
    calenderObj.innerHTML = HS_calender(new Date());
    calenderObj.style.position = "absolute";
    calenderObj.targetObj = inputObj;
    inputObj.parentNode.insertBefore(calenderObj, inputObj.nextSibling);
}

在这里插入图片描述

运行结果如图：

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值