最近在钻研前端，写了个日期控件，内涵代码注释，希望能帮助到大家~

1.html代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="js/dateJs.js"></script>

    <!--<script src="js/rili.js"></script>-->

    <style type="text/css">

        * {

            margin: ;

            padding: ;

        }

        body {

            font-size: 13px;

        }

        .calendar {

            width: 330px;

        }

            .calendar .title {

                position: relative;

                width: %;

                height: 30px;

                line-height: 30px;

                background: #17a4eb;

            }

        .title div {

            position: absolute;

        }

        .prev {

            left: 10px;

        }

        .now {

            left: %;

        }

        .next {

            right: 10px;

        }

        input {

            height: 30px;

            width: 326px;

        }

        table {

            width: %;

            border-collapse: collapse;

        }

            table th {

                border: 1px solid #ccc;

            }

            table td {

                text-align: center;

                border: 1px solid #ccc;

            }

        .red {

            background-color: #a1cbdb;

        }

        .blue {

            background-color: #e4e3e3;

        }

    </style>

</head>

<body>

    <input type="text" id="Dateinput" />

    <div class="calendar" id="calender" style="display: none;">

    </div>

</body>

</html>

2.js代码

window.onload = function () {

    //获取日期 输入框

    var oInput = document.getElementById('Dateinput');

    //获取日历

    var oCalender = document.getElementById('calender');

    //获取当前日期

    var oDate = new Date();

    //获取当年 年

    var year = oDate.getFullYear();

    //获取当前 月

    var month = oDate.getMonth() + ;

    //日历框不能重复创建

    var flag = false;

    //日期输入框 获取焦点时 加载日历

    oInput.onfocus = function () {

        showDate(year, month);

    }

    //显示日历

    function showDate(year, month) {

        if (false == flag) {

            //1.日历标题

            var oTitle = document.createElement('div');

            oTitle.className = 'title';

            //1.1日历标题文本

            var prevM = ;

            var nextM = ;

            prevM = month - ;

            nextM = month + ;

            //当月份为1时 上一个月为12

            if (month == ) {

                prevM = ;

            }//当月份为12时 下一个月为1

            else if (month == ) {

                nextM = ;

            }

            var titleHtml = "";

            titleHtml += '<div class="prev" id="prev"><span>';

            titleHtml += prevM + '</span>月</div>';

            titleHtml += '<div class="now">';

            titleHtml += '<span class="span">';

            titleHtml += year;

            titleHtml += '</span>年';

            titleHtml += '<span class="span">' + month;

            titleHtml += '</span>月</div>';

            titleHtml += '<div class="next" id="next"><span>';

            titleHtml += nextM + '</span>月</div>';

            oTitle.innerHTML = titleHtml;

            //将日历标题 拼接到日历

            oCalender.appendChild(oTitle);

            //1.2获取日历 表头元素（以便添加事件）

            var oSpans = oCalender.getElementsByTagName('span');

            var prevMonth = oSpans[];

            var nextMonth = oSpans[];

            var nowMonth = oSpans[];

            var nowYear = oSpans[];

            //2.创建星期 表头

            var otable = document.createElement('table');

            var othead = document.createElement('thead');

            var otr = document.createElement('tr');

            //2.1表头内容填充

            var arr = ['日', '一', '二', '三', '四', '五', '六'];

            for (var i = ; i < arr.length; i++) {

                //创建th

                var oth = document.createElement('th');

                oth.innerHTML = arr[i];

                otr.appendChild(oth);

            }

            //2.2将表头加入到日历

            othead.appendChild(otr);

            otable.appendChild(othead);

            oCalender.appendChild(otable);

            //3.添加 当前日历 全部日期

            //3.1.先获得当期月 有多少天

            var dayNum = ;

            if (month ==  || month ==  || month ==  || month ==  || month ==  || month ==  || month == ) {

                dayNum = ;

            } else if (month ==  || month ==  || month ==  || month == ) {

                dayNum = ;

            } else if (month ==  && isLeapYear(year)) {

                dayNum = ;

            } else {

                dayNum = ;

            }

            //3.2.创建 6行7列 日期容器

            var otbody = document.createElement('tbody');

            for (var i = ; i < ; i++) {

                var otr = document.createElement('tr');

                for (var j = ; j < ; j++) {

                    var otd = document.createElement('td');

                    otr.appendChild(otd);

                }

                otbody.appendChild(otr);

            }

            otable.appendChild(otbody);

            //3.3获得 1号对应的是星期几

            //3.3.1.将当月1号赋值给日期变量

            oDate.setFullYear(year);

            //注意 js日期的月份是从0 开始计算

            oDate.setMonth(month - );

            oDate.setDate();

            //3.3.2.计算1号在第一行日期容器中的位置，依次给日期容器填充内容

            //注意 js中 getDay方法是获取当前日期是星期几

            var week = oDate.getDay();

            var otds = oCalender.getElementsByTagName('td');

            for (var i = ; i < dayNum; i++) {

                otds[i + week].innerHTML = i + ;

            }

            //让当前日期显示红色、后面的显示蓝色

            showColor(otds);

            //给左右月份绑定点击事件

            monthEvent();

            //判断最后一行是否全为空

            lastTr(otds);

            flag = true;

            document.getElementById('calender').style.display = "block";

        }

    }

    //判断是否是闰年

    function isLeapYear(year) {

        if (year %  ==  && year %  == ) {

            return true;

        } else if (year %  !=  && year %  == ) {

            return true;

        } else {

            return false;

        }

    }

    //判断日期容器最后一行是否有值

    function lastTr(otds) {

        var flag = true;

        for (var i = ; i < ; i++) {

            if (otds[i].innerHTML != '') {

                flag = false;

            }

        }

        //全是空的

        if (flag) {

            for (var i = ; i < ; i++) {

                otds[i].style.display = 'none';

            }

        }

    }

    //当前日期显示红色、前面的显示灰色

    function showColor(otds) {

        //当前日期

        var nowday = new Date().getDate();

        var nowyear = new Date().getFullYear();

        var nowmonth = new Date().getMonth();

        var oCalendar = document.getElementById("calender");

        ospans = oCalendar.getElementsByTagName('span');

        var contralYear = ospans[].innerHTML;

        var contralMonth = ospans[].innerHTML;

        var oindex = ;

        for (var i = ; i < otds.length; i++) {

            if (nowday == otds[i].innerHTML && nowyear == contralYear && nowmonth +  == contralMonth) {

                otds[i].className = 'red';

                oindex = i;

            }

        }

    }

    //给左右月份绑定点击事件

    function monthEvent() {

        var oCalendar = document.getElementById("calender");

        var prevDiv = document.getElementById("prev");

        var nextDiv = document.getElementById("next");

        var prevMonth = prevDiv.getElementsByTagName("span");

        var nextMonth = nextDiv.getElementsByTagName("span");

        prevDiv.onclick = function () {

            flag = false;

            oCalendar.innerHTML = '';

            showDate(year, parseInt(prevMonth[].innerHTML));

        }

        nextDiv.onclick = function () {

            flag = false;

            oCalendar.innerHTML = '';

            showDate(year, parseInt(nextMonth[].innerHTML));

        }

    }

}

js日期控件demo的更多相关文章

  1. 利用js日期控件重构WEB功能

    开发需求:网页中的日期部门(注册页面和查询条件)都用js日期控件重写 页面一:更新员工页面 empUpdate.jsp 中增加 onfocus 事件 入职日期:<input id="h ...

  2. JSP JS 日期控件的下载、使用及注意事项

    网上流行的时间日期控件比较多,个人觉得My97DatePicker的日期控件不错,值得推荐. 具体的使用过程如下: 1.下载My97DatePicker.rar或 My97DatePickerBeta ...

  3. js 日期控件 可以显示为和历

    日期控件的js <!-- /** * Calendar * @param beginYear 1990 * @param endYear 2010 * @param language 0(zh_ ...

  4. js日期控件遇到的问题

    一.问题: 在web项目里有很多时候需要使用日期控件来完成相关的功能,但是日期控件的日期格式又和我们的需求不符 那么,就需要我们来自定义日期的格式完成需求 二.解决: 1.取月末: (1)强制取值: ...

  5. js日期控件

    My97日期控件 官方网站 My97 Datepicker Home   http://www.my97.net/

  6. layDate1.0正式公布，您一直在寻找的的js日期控件

    你是时候换一款日期控件了,而layDate很愿意和您成为工作伙伴.她正致力于成为全球最高大上的web日期支撑,为国内外全部从事web应用开发的同仁提供力所能及的动力.她基于原生JavaScript精心 ...

  7. 推荐几款开源的js日期控件

    做为一个正规的网站,经常需要一些日期或时间的筛选,所以我们今天就推荐二十多款javascript的js日期/时间筛选插件.个个经典,绝对有你需要的. My97DatePicker ,国人开发的一款js ...

  8. js 日期控件laydate使用

    官网  http://sentsin.com/layui/laydate/ 1. 下载官网上的压缩包,解压后只需要复制laydate 文件夹到你的项目中; 2. 在页面引入  <script t ...

  9. WebFrom 的js日期控件

    1.WdatePicker.js /* * My97 DatePicker 4.7 Release * License: http://www.my97.net/dp/license.asp */ v ...

随机推荐

  1. 330. Patching Array--Avota

    问题描述: Given a sorted positive integer array nums and an integer n, add/patch elements to the array s ...

  2. 【POJ3468】【树状数组区间修改】A Simple Problem with Integers

    Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. On ...

  3. Java多线程:Semaphore

    Semaphore为并发包中提供用于控制某资源同时可以被几个线程访问的类 实例代码: // 允许2个线程同时访问 final Semaphore semaphore = new Semaphore(2 ...

  4. LGDT/LIDT-加载全局/中断描述符表寄存器

    将源操作数中的值加载到全局描述符表寄存器 (GDTR) 或中断描述符表寄存器 (IDTR).源操作数指定 6 字节内存位置,它包含全局描述符表 (GDT) 或中断描述符表 (IDT) 的基址(线性地址 ...

  5. 项目知识点.Part1

    1. storyboard中添加scrollview: 先添加scrollView,进行约束 添加View 进行约束 相对于scrollView 如果水平滑动:设置vertically in Cont ...

  6. centos es2.x安装

    #把下面这个放到es的server路径下,这个是rpm安装改了下. # # init.d / servicectl compatibility (openSUSE) # if [ -f /etc/rc ...

  7. linux 修改目录文件权限，目录文件所属用户，用户组

    1:查看命令:ll drwxr-xr-x  4 gamer ftp      4096 Mar  7 16:56 gstore drwxrwxrwx 10 root  ftp      4096 De ...

  8. Preparing for the Contest

     Codeforces Round #222 (Div. 1)B:http://codeforces.com/contest/377/problem/B 题意:m个任务,每个任务会有一个复杂度,然后给 ...

  9. ios入门之c语言篇——基本函数——1——随机数生成

    1.随机数函数 参数返回值解析: 参数: a:int,数字范围最小值: b:int,数字范围最大值: 返回值: 1:闰年: 0:非闰年: 备注: a-b的绝对值不能超过int的最大值(65535); ...

  10. Church encoding

    In mathematics, Church encoding is a means of representing data and operators in the lambda calculus ...