平时只有下班时间能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版的更多相关文章

  1. 推荐一款JavaScript日历控件:kimsoft-jscalendar

    一.什么是 kimsoft-jscalendar     一个简洁的avaScript日历控件,可在Java Web项目,.NET Web 项目中使用 二.kimsoft-jscalendar 有什么 ...

  2. JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串,和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动

    JavaScript日历控件开发   概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...

  3. javascript日历控件

    以前要用到日历控件都是直接从网上下载一套源码来使用,心里一直有个梗,就是想自己动手写一个日历控件,最近刚好来了兴趣,时间上也允许,于是自己摸索写了一个,功能还算完善,界面就凑合了.可能最值得说的一点就 ...

  4. JavaScript日历控件开发

    概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果 代码地址:https://github.com/aspwebchh/javascript-cont ...

  5. 自定义javascript日历控件

    Web页中的日历一般离不开表格,通常都使用表格装载指定月的日期等信息.所以,要编写JS日历,首先必须解决的问题是表格的行与列问题.列是固定的,七列,因为一周有七天.行需要动态计算,因为,每一个月的第一 ...

  6. JavaScript日历控件!JS兼容IE6.7.FF.可挡住下拉控件

    原文发布时间为:2009-08-22 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  7. JS日历控件优化(增加时分秒)

    JS日历控件优化      在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下:      1. 在原基础上 支持 yyyy ...

  8. 【转】【WebDriver】不可编辑域和日历控件域的输入 javascript

    http://blog.csdn.net/fudax/article/details/8089404 今天用到日历控件,用第一个javascript执行后页面上的日期控件后,在html中可以看到生效日 ...

  9. javascript实例学习之六—自定义日历控件

    基于之前上篇博客轻量级jquery,tool.js和base.js.自定义开发的base_datePicker插件,效果类似于jquery_ui的datePicker插件 //基于Base.js以及t ...

随机推荐

  1. HTML5的Server-Sent Events介绍

    body{ font: 16px/1.5em 微软雅黑,arial,verdana,helvetica,sans-serif; }       HTML5有一个Server-Sent Events(S ...

  2. bootstrap源码分析之scrollspy(滚动侦听)

    源码文件: Scrollspy.js 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项2.导航必须是 .nav > li > a 结构,并且a ...

  3. Javascript获取随机数

    <script type="text/javascript"> function getRandom(n,m){ var n=Number(n); //强制转换成数字 ...

  4. MySQL的常规操作

    MySQL的常规知识 show 查看数据库 show databases; 查看表 存在的所有表 show tables; 创建表的命令 show create table table_name; 表 ...

  5. 优秀的CSS框架---bootstrap

    Bootstrap是Twitter推出的一个用于前端开发的开源工具包.它 由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.现在在网上已经有 ...

  6. oracle应该安装在什么版本的linux下

    今天想在我的ubuntu上安装oracle 11g r2,在网上所有了一些教程,然后找到了oracle官网网站的Operating System Requirements,内容如下: Operatin ...

  7. iOS 三方库fmdb 的使用

    使用fmdb 做本地数据的存储非常方便, 1. github 上搜索fmdb 下载压缩包 导入到工程中 (如果你的mac 有cocoapod 也可以直接通过cocoapod 添加) 2. 以下代码是通 ...

  8. JavaScript学习01 语言简介、基本使用和变量声明

    JavaScript语言简介.基本使用和变量声明 JavaScript是网景(Netscape)公司开发的一种基于客户端浏览器.面向对象.事件驱动式的网页脚本语言. JavaScript的前身叫Liv ...

  9. Android studio打开项目时出现 gradle download 无反应

    在使用android studio 新建 项目的时候,会发现一直无法下载 gradle程序一直卡住不动,原因是被墙了. 解决方法: 到gradle官网下载离线包,解压后将bin路径加入Path环境变量 ...

  10. exec

    之前一直这样显示 不知道修改了什么,变成了这样. 在终端   找到这个podfile所在的目录 chmod 600 podfile   然后 就变回来了.可能是修改权限的问题.