原生js日期选择

阳光穿透心脏的1/2处 2021-07-04 11:32 419阅读 0赞

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'>»</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'>«</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)'>×</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);
    }

![在这里插入图片描述][20190920101005962.png]

## 运行结果如图： ##

![在这里插入图片描述][20190920101137894.png]

[20190920101005962.png]: /images/20210704/39673eb6294941bdbc87cf8e76dcb58f.png
[20190920101137894.png]: /images/20210704/75973e06dd504cf3afe4ef13712126e4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，419人围观）

还没有评论，来说两句吧...

相关阅读

相关使用原生小程序组件Picker自定义日期时间选择器

使用原生小程序组件Picker自定义日期时间[选择器][Link 1] 1、 Picker简单介绍可以看到Picker类型有5种，具体可以查看[微信开放文档 p

向右看齐/ 2024年03月23日 23:29/ 0 赞/ 41 阅读

相关选择起始日期

![在这里插入图片描述][9d88784a78264eedbddc4f910befe6bf.png] <template> <!-- This is

分手后的思念是犯贱/ 2024年02月05日 20:14/ 0 赞/ 7 阅读

相关通过原生js动态给元素添加选择器

添加：节点.classList.add("类名")；例如： li.classList.add('active');

今天药忘吃喽~/ 2023年08月17日 17:50/ 0 赞/ 69 阅读

相关【Vue.js】Vue.js组件库Element中的时间选择器、日期选择器、日期时间选择器和颜色选择器

1、TimePicker 时间选择器用于选择或输入日期。固定时间点提供几个固定的时间点供用户选择。 ![20200831145158463.png_pi

比眉伴天荒/ 2022年12月02日 13:53/ 0 赞/ 1385 阅读

相关 Js日期选择器可选范围

[下载地址][Link 1]响应,可定制,功能丰富的日期&时间选择器，可以选择日期范围的Js组件框架。 ![1631562012.png][] dd: [Link 1]

﹏ヽ暗。殇╰゛Y/ 2022年09月11日 08:25/ 0 赞/ 214 阅读

相关 java日期选择

日期选择组件WdatePicker 先将这个引入进来在你的文本框里面显示具体如下： <script type="text/javascript" src=

清疚/ 2022年06月12日 23:38/ 0 赞/ 198 阅读

相关原生JS

[你知道URL、URI和URN三者之间的区别吗？][URL_URI_URN] [URL_URI_URN]: http://mp.weixin.qq.com/s/9Q4dE9

ゝ一世哀愁。/ 2022年06月08日 06:26/ 0 赞/ 270 阅读

相关 js选择开始日期，结束日期加一天

![20180413134542415][] <!DOCTYPE html> <html> <head> <meta charse

末蓝、/ 2022年05月27日 06:49/ 0 赞/ 305 阅读

相关原生JS 左右箭头选择日期

先上个效果图，就是用左右尖括号可改变中间日期的值。（点击中间显示区域有时间选择器弹框，用的插件就不说了，主要说自己原创的部分）

川长思鸟来/ 2022年05月27日 05:21/ 0 赞/ 229 阅读

相关原生js日期选择

index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"/>

阳光穿透心脏的1/2处/ 2021年07月04日 11:32/ 0 赞/ 420 阅读