原生js日期选择

最新推荐文章于 2025-06-13 10:32:02 发布
最新推荐文章于 2025-06-13 10:32:02 发布
阅读量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);
}

在这里插入图片描述

运行结果如图：

在这里插入图片描述

lCalendar纯原生js日期时间选择纯原生js日期时间选择
09-01
lCalendar纯原生js日期时间选择纯原生js日期时间选择；lCalendar纯原生js日期时间选择纯原生js日期时间选择
兼容IE和firefox的日期控件
wanghuailong的专栏
06-23 3168
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">日历控件/**********************************************************    使用方法*        控件调用onclick="fPopCalendar(event,this,this)"*    如下，给控件设置为readon
时间选择器控件的使用以及注意事项
最新发布
2503_91259466的博客
06-13 1012
时间选择器是Web开发中常用的表单控件，用于让用户选择或输入时间。以下是主流时间选择器的使用方法和关键注意事项。
caladar日期输入
yizhenfengdx的专栏
10-30 846
 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
js原生时间日期选择
weixin_30765319的博客
03-01 424
纯手工原生js写法(不带其他任何框架) html文件： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>日期插件</title> &l...
js日期选择控件
weixin_30393907的博客
09-16 117
<script type="text/javascript" src="../js/datepicker.js"></script> 开始 <input runat="server" type="text" id="txtStartDate" size="14" /> <img alt="" onclick="return ...
dorea.js（原生JS日期选择）
09-04
**标题解析：** "dorea.js" 是一个专门用于日期选择的JavaScript库，它完全基于原生JS编写，不依赖任何第三方库如jQuery。"原生JS日期选择"表明这个库的目标是为开发者提供一个轻量级且高效的解决方案，帮助他们在...
JS日期时间选择器，js原生，任何地方可用
05-21
本文将深入探讨如何使用JavaScript原生代码创建一个可复用的日期时间选择器，并结合给定的文件名来理解其组成部分。 首先，"dol-datepicker.js" 文件很可能是这个日期时间选择器的主要实现部分，它包含了JavaScript...
原生js日历日期控件带时分秒日期选择器
06-01
- **DOM操作**：在JavaScript中，我们首先需要通过Document Object Model（DOM）来操纵HTML元素，创建或修改日期选择器的显示部分。 - **事件监听**：添加事件监听器以响应用户的交互，如点击按钮切换日历、选择...
移动端日期插件，原生js实现
03-22
可在小程序、h5页面中使用 详细介绍请看https://blog.youkuaiyun.com/a805492851b/article/details/115072387?spm=1001.2014.3001.5501
lCalendar纯原生js日期时间选择（修改版）
02-20
lCalendar纯原生js日期时间选择，原版http://download.youkuaiyun.com/detail/cometwo/9436022 博客地址：http://blog.youkuaiyun.com/libin_1/article/details/50706030
js日期时间选择
07-22
js日期时间选择框，可以精确选择年月日，时分秒
js 日期选择器
03-28
NULL 博文链接：https://913.iteye.com/blog/1260595
日期选择(原生)
jiahui6666的博客
12-21 392
public class MainActivity extends AppCompatActivity implements View.OnClickListener { private Button button; @Override protected void onCreate(Bundle savedInstanceState) { super.on...
纯js实现日期选取功能
weixin_34380781的博客
04-13 584
平年： 　　2月-->28天 　　4，6，9，11月-->30天 　　1,3,5,7,8,10,12月-->31天 闰年： 　　2月-->29天 　　4，6，9，11月-->30天 　　1,3,5,7,8,10,12月-->31天 闰年的计算方式： 　　1、年份/100 　　2、如果 年份/100有余数 ， 年份/4 没有余数 是闰年 ...
原生js 日历日期
who_become_gods的博客
02-25 265
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * {padding: 0;margin: 0;} .calendar {width: 420px;height: 400px;position: fixed;top: 100px;left: 20...
日期选择方法总结 原生js
qq_40595166的博客
10-23 521
日期选择方法总结 做项目的时候，经常碰到需要根据不同时间段来查询结果的需求，总结了一下当前用到的各个时间段，起始时间和结束时间方法，话不多说，直接上代码： 一.获取对应时区的时间 getTimeZoneE8(i, timeInt) { if (typeof i !== 'number') return; let d = new Date(timeInt); let len = d.getTime(); let offset = d.getTimezoneOffset
原生JS实现一个日期选择器（DatePicker）组件
weixin_41142496的博客
01-17 807
这是通过原生HTML/CSS/JavaScript完成一个日期选择器（datepicker）组件，一个纯手搓的组件的开发。主要包括datepicker静态结构的编写、日历数据的计划获取、组件的渲染以及组件事件的处理。 根据调用时的时间格式参数，可以控制短日期格式或长日期格式。 实现效果（短日期格式） 实现效果（长日期格式） 完整代码包含4个文件： JavaScript实...
打造原生JavaScript日期选择器-dorea.js
1. 原生JavaScript日期选择的实现方法 在介绍dorea.js这个工具之前，需要明确在前端开发中实现日期选择功能有多种方法。原生JavaScript提供了Date对象来处理日期和时间。开发者可以直接使用Date对象来创建日期、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值