javascript日历控件——纯javascript版

平时只有下班时间能code，闲来写了个纯javascript版。引用该calendar.js文件，然后给要设置成日历控件的input的id设置成calendar，该input就会变成日历控件。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>日历控件</title>

<script src="js/calendar.js" defer></script>

</head>

<body>

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

</body>

</html>

引用calendar.js时，一定要加defer属性。

calendar.js源码：

// JavaScript Document

var days = new Array("日","一","二","三","四","五","六");//星期

var today = new Date();//当天日期，备用

var month_big = new Array("1","3","5","7","8","10","12"); //包含所有大月的数组

var month_small = new Array("4","6","9","11"); //包含所有小月的数组

var separator = "-";//间隔符 

var calendar = document.getElementById("calendar");

var cal_parent = calendar.parentNode;//获取父元素

var cal_width = ((calendar.clientWidth<150) ? 150 : calendar.clientWidth);//获取input的宽度，如果input宽度小于150，调整为150，150为日历块最小宽度

var cal_height = calendar.clientHeight;//获取input的高度，整数

var cal_X = calendar.offsetLeft;//获取input左边 距父元素的距离，整数

var cal_Y = calendar.offsetTop;//获取input顶部 距父元素的距离，整数

calendar.style.cursor = "pointer";//将input的鼠标设置成小手

calendar.readOnly = "readOnly";//设置input为只读

calendar.onblur = hideCalendar; //当input失去焦点时，隐藏cal_body

calendar.onclick = showCalendar;//点击input时调用showCalendar函数

//取input宽度的七分之一再减一作为方格的边长

var pane_height = cal_width/7 - 1; 

function hideCalendar(){

    var cal_body = document.getElementById("cal_body");

    if(cal_body != undefined){

        cal_body.parentNode.removeChild(cal_body);

    }

}

//显示日历主体

function showCalendar(){

    var cal_body = document.getElementById("cal_body");

    if(cal_body != undefined){

        cal_body.parentNode.removeChild(cal_body);

    }

    else{

        var cal_body = document.createElement("DIV");

        cal_body.id = "cal_body";

        cal_body.style.width = cal_width + "px";

        cal_body.style.height = "auto";

        cal_body.style.overflow = "hidden";

        cal_body.style.position = "absolute";

        cal_body.style.zIndex = "9";

        cal_body.style.left = cal_X + "px";

        cal_body.style.top = (cal_Y + cal_height + 5) + "px";

        cal_body.style.border = "solid 1px #CCCCCC";

        //鼠标移动到cal_body上时，禁用input的onblur事件，防止cal_body因input失去焦点而被隐藏

        cal_body.onmouseover = function(){

            calendar.onblur = undefined;

        }

        //鼠标从cal_body移除时，启用input的onblur事件，并且先让input获得焦点，否则当在cal_body上空白处点击后再移出在其他地方点击时，input因没有焦点而无法触发onblur事件

        cal_body.onmouseout = function(){

            calendar.focus();

            calendar.onblur = hideCalendar;

        }

        cal_parent.appendChild(cal_body);

        var line1 = document.createElement("DIV");

        line1.style.width = cal_width + "px";

        line1.style.height =  pane_height + "px";

        line1.style.backgroundColor = "#0FF";

        var btn1 = document.createElement("DIV");

        btn1.style.width = (cal_width/3 - 3) + "px";

        btn1.style.height = pane_height + "px";

        btn1.style.lineHeight = pane_height + "px";

        btn1.style.textAlign = "center";

        btn1.innerHTML = "<";

        btn1.style.cursor = "pointer";

        btn1.style.cssFloat = "left";

        btn1.onclick = function(){

            if(isValidated()){

                var old_year = parseInt(document.getElementById("input_year").value);

                if(old_year > 1960){

                    var year = old_year - 1;

                    var month = parseInt(document.getElementById("input_month").value);

                    var val = year + separator + month + separator + 1;

                    init(val);

                }

            }

        };

        line1.appendChild(btn1);

        var input_year = document.createElement("INPUT");

        input_year.id = "input_year";

        input_year.style.width = (cal_width/3) + "px";

        input_year.style.height = "70%";

        input_year.style.cssFloat = "left";

        input_year.style.textAlign = "center";

        input_year.onchange = function(){

            changed();

        };

        line1.appendChild(input_year);

        var btn2 = document.createElement("DIV");

        btn2.style.width = (cal_width/3 - 3) + "px";

        btn2.style.height = pane_height + "px";

        btn2.style.lineHeight = pane_height + "px";

        btn2.style.textAlign = "center";

        btn2.innerHTML = ">";

        btn2.style.cursor = "pointer";

        btn2.style.cssFloat = "left";

        btn2.onclick = function(){

            if(isValidated()){

                var old_year = parseInt(document.getElementById("input_year").value);

                if(old_year < 2050){

                    var year = old_year + 1;

                    var month = parseInt(document.getElementById("input_month").value);

                    var val = year + separator + month + separator + 1;

                    init(val);

                }

            }

        };

        line1.appendChild(btn2);

        var line2 = document.createElement("DIV");

        line2.style.width = cal_width + "px";

        line2.style.height =  pane_height + "px";

        line2.style.backgroundColor = "#0FF";

        var btn3 = document.createElement("DIV");

        btn3.style.width = (cal_width/3 - 3) + "px";

        btn3.style.height = pane_height + "px";

        btn3.style.lineHeight = pane_height + "px";

        btn3.style.textAlign = "center";

        btn3.innerHTML = "<";

        btn3.style.cursor = "pointer";

        btn3.style.cssFloat = "left";

        btn3.onclick = function(){

            if(isValidated()){

                var old_month = parseInt(document.getElementById("input_month").value)

                if(old_month > 1){

                    var year = parseInt(document.getElementById("input_year").value);

                    var month = old_month - 1;

                    var val = year + separator + month + separator + 1;

                    init(val);

                }

                else {

                    var year = parseInt(document.getElementById("input_year").value) - 1;

                    var month = 12;

                    var val = year + separator + month + separator + 1;

                    init(val);

                }

            }

        };

        line2.appendChild(btn3);

        var input_month = document.createElement("INPUT");

        input_month.id = "input_month";

        input_month.style.width = (cal_width/3) + "px";

        input_month.style.height = "70%";

        input_month.style.cssFloat = "left";

        input_month.style.textAlign = "center";

        input_month.onchange = function(){

            changed();

        };

        line2.appendChild(input_month);

        var btn4 = document.createElement("DIV");

        btn4.style.width = (cal_width/3 - 3) + "px";

        btn4.style.height = pane_height + "px";

        btn4.style.lineHeight = pane_height + "px";

        btn4.style.textAlign = "center";

        btn4.innerHTML = ">";

        btn4.style.cursor = "pointer";

        btn4.style.cssFloat = "left";

        btn4.onclick = function(){

            if(isValidated()){

                var old_month = parseInt(document.getElementById("input_month").value)

                if(old_month < 12){

                    var year = parseInt(document.getElementById("input_year").value);

                    var month = parseInt(document.getElementById("input_month").value) + 1;

                    var val = year + separator + month + separator + 1;

                    init(val);

                }

                else {

                    var year = parseInt(document.getElementById("input_year").value) + 1;

                    var month = 1;

                    var val = year + separator + month + separator + 1;

                    init(val);

                }

            }

        };

        line2.appendChild(btn4);

        cal_body.appendChild(line1);

        cal_body.appendChild(line2);

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

            var pane = document.createElement("DIV");

            pane.className = "pane";

            pane.style.width = pane_height + "px";

            pane.style.height = pane_height + "px";

            pane.style.lineHeight = pane_height + "px";

            pane.style.textAlign = "center";

            pane.style.cssFloat = "left";

            pane.innerHTML = days[i];

            cal_body.appendChild(pane);

        }

        init(calendar.value);

    }

}

function init(val){

    clearPane();

    var cal_body = document.getElementById("cal_body");

    var temp_date;

    var year;

    var month;

    var date;

    if(val == ""){

        temp_date = today;

        calendar.value = today.toFormatString(separator);

    }

    else{

        year = val.year();

        month = val.month(separator);

        date = val.date(separator);

        temp_date = new Date(year,month,date);

    }

    year = temp_date.getFullYear();

    month = temp_date.getMonth() + 1;

    date = temp_date.getDate();

    temp_date.setDate(1);

    var start = temp_date.getDay() + 7;

    var end;

    if(array_contain(month_big, month)){

        end = start + 31;

    }

    else if(array_contain(month_small, month)){

        end = start + 30;

    }

    else{

        if(isLeapYear(year)){

            end = start + 29;

        }

        else{

            end = start + 28;

        }

    }

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

        var pane = document.createElement("DIV");

        pane.className = "pane";

        pane.style.width = pane_height + "px";

        pane.style.height = pane_height + "px";

        pane.style.lineHeight = pane_height + "px";

        pane.style.textAlign = "center";

        pane.style.cssFloat = "left";

        cal_body.appendChild(pane);

    }

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

        var pane = document.createElement("DIV");

        pane.className = "pane";

        pane.style.width = pane_height + "px";

        pane.style.height = pane_height + "px";

        pane.style.lineHeight = pane_height + "px";

        pane.style.textAlign = "center";

        pane.style.cssFloat = "left";

        pane.innerHTML = i - start + 1;

        pane.style.cursor = "pointer";

        pane.onmouseover = function(){

            this.style.backgroundColor = '#0FF';

        }

        if(date == (i - start + 1))

            pane.style.backgroundColor = '#0FF';

        else{

            pane.onmouseout = function(){

                this.style.backgroundColor = '';

            }

        }

        pane.onclick = function(){

            calendar.value = year + separator + month + separator + this.innerHTML;

            cal_body.parentNode.removeChild(cal_body);

        }

        cal_body.appendChild(pane);

        document.getElementById("input_year").value = year;

        document.getElementById("input_month").value = month;

    }

}

//格式化输出

Date.prototype.toFormatString  = function(separator){

    var result = this.getFullYear() + separator + (this.getMonth() + 1) + separator + this.getDate();

    return result;

};

//从格式化字符串中获取年份

String.prototype.year = function(){

    var str = this.substring(0,4);

    return str;

};

//从格式化字符串中获取月份

String.prototype.month = function(separator){

    var start = this.indexOf(separator) + 1;

    var end = this.lastIndexOf(separator);

    return parseInt(this.substring(start, end)) - 1;

};

//从格式化字符串中获取日期

String.prototype.date = function(separator){

    var start = this.lastIndexOf(separator) + 1;

    return this.substring(start);

};

//判断数组array中是否包含元素obj的函数，包含则返回true，不包含则返回false

function array_contain(array, obj){

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

        if (array[i] == obj)

            return true;

    }

    return false;

}

//判断年份year是否为闰年，是闰年则返回true，否则返回false

function isLeapYear(year){

    var a = year % 4;

    var b = year % 100;

    var c = year % 400;

    if( ( (a == 0) && (b != 0) ) || (c == 0) ){

        return true;

    }

    return false;

}

//清除方格

function clearPane(){

    var limit = document.getElementsByClassName("pane").length;

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

        var pane = document.getElementsByClassName("pane").item(7);

        pane.parentNode.removeChild(pane);

    }

}

//判断输入是否合法

function isValidated(){

    var year = document.getElementById("input_year").value;

    var month = document.getElementById("input_month").value;

    if(isNaN(year) || isNaN(month)){

        alert("请输入正确的年份/月份");

        return false;

    }

    else{

        if(year%1 != 0 || month%1 != 0){

            alert("请输入正确的年份/月份");

            return false;

        }

        else{

            year = parseInt(year);

            if(year < 1960 || year > 2050){

                alert("请输入1960~2050之间的年份！");

                return false;

            }

            else if(month < 1 || month >12){

                alert("请输入正确的月份！");

                return false;

            }

            else{

                return true;

            }

        }

    }

}

//年份月份发生变化时处理函数

function changed(){

    if(isValidated()){

        var year = document.getElementById("input_year").value;

        var month = document.getElementById("input_month").value;

        var val = year + separator + month + separator + 1;

        init(val);

    }

}

javascript日历控件——纯javascript版的更多相关文章

推荐一款JavaScript日历控件：kimsoft-jscalendar
一.什么是 kimsoft-jscalendar 一个简洁的avaScript日历控件,可在Java Web项目,.NET Web 项目中使用二.kimsoft-jscalendar 有什么 ...
JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串，和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动
JavaScript日历控件开发概述在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...
javascript日历控件
以前要用到日历控件都是直接从网上下载一套源码来使用,心里一直有个梗,就是想自己动手写一个日历控件,最近刚好来了兴趣,时间上也允许,于是自己摸索写了一个,功能还算完善,界面就凑合了.可能最值得说的一点就 ...
JavaScript日历控件开发
概述在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebchh/javascript-cont ...
自定义javascript日历控件
Web页中的日历一般离不开表格,通常都使用表格装载指定月的日期等信息.所以,要编写JS日历,首先必须解决的问题是表格的行与列问题.列是固定的,七列,因为一周有七天.行需要动态计算,因为,每一个月的第一 ...
JavaScript日历控件！JS兼容IE6.7.FF.可挡住下拉控件
原文发布时间为:2009-08-22 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
JS日历控件优化(增加时分秒)
JS日历控件优化在今年7月份时候写了一篇关于 "JS日历控件" 的文章 , 当时只支持年月日的日历控件,现在优化如下: 1. 在原基础上支持 yyyy ...
【转】【WebDriver】不可编辑域和日历控件域的输入 javascript
http://blog.csdn.net/fudax/article/details/8089404 今天用到日历控件,用第一个javascript执行后页面上的日期控件后,在html中可以看到生效日 ...
javascript实例学习之六—自定义日历控件
基于之前上篇博客轻量级jquery,tool.js和base.js.自定义开发的base_datePicker插件,效果类似于jquery_ui的datePicker插件 //基于Base.js以及t ...

随机推荐

Razor语法大全
本文页面来源地址:http://www.cnblogs.com/dengxinglin/p/3352078.html Razor是基于framewor4以上写的一个开源项目:https://githu ...
selenium启动firefox时加载扩展
有些时候,我们测试需要用到插件或者已经导入的证书(比如金融和安全加密行业),而selenium启动firefox时会打开一个新的,不含有任何插件和个人证书的firefox(等同于全新安装后第一次打开的 ...
asp.net mvc4 使用 System.Web.Optimization 对javascript和style的引入、代码合并和压缩的优化（ScriptBundle，StyleBundle，Bundling and Minification ）
Bundling and Minification两个单词对今天的内容有个比较好的总结. 问题所在一. 在asp.net包括mvc项目中,引入js和css也许有人认为是个很容易和很简单操作的事情,v ...
js判断radiobuttonlist的选中值显示/隐藏其它模块
<script> $(function () { var SelectVal = $("input[name='rblGJS']:checked").val(); if ...
【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
JavaScript中的各种变量提升（Hoisting）
首先纠正下,文章标题里的 “变量提升” 名词是随大流叫法,“变量提升” 改为 “标识符提升” 更准确.因为变量一般指使用 var 声明的标识符,JS 里使用 function 声明的标识符也存在提升( ...
IOS常用第三方开源类库&组件
1.AFNetworking AFNetworking 采用 NSURLConnection + NSOperation, 主要方便与服务端 API 进行数据交换, 操作简单, 功能强大, 现在许多人 ...
Android Studio no debuggable applications解决方案
android studio 默认是没有开启debuggable 功能的,在tools里打开该功能即可,Tools->Android->Enable ADB Integration. 刚设 ...
UIApplicationDelegate
App受到干扰时,UIApplication会通知它的delegate对象,让delegate处理系统事件. 项目中的AppDelegate已经遵守了UIApplicationDelegate协议 ...
数据持久化（一）--NSKeyedArchiver
数据持久化: 将内存中的数据按某种格式存进磁盘数据的种类: 1,结构化的数据 2, 字节流数据结构化的数据字节流内存中结构化的数据 -> 磁盘, 叫: 归档字 ...

javascript日历控件——纯javascript版

javascript日历控件——纯javascript版的更多相关文章

随机推荐

热门专题