首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

纯javascript版日历控件

Posted in Javascript onNovember 24, 2016

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

纯javascript版日历控件

<!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版日历控件

- Author -

dige1993

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery 分页控件实现代码
Nov 30 Javascript
js 图片等比例缩放代码
May 13 Javascript
jQuery-ui中自动完成实现方法
Jun 10 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
jquery使用EasyUI Tree异步加载JSON数据（生成树）
Feb 11 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
js通过classname来获取元素的方法
Nov 24 #Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 #Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 #Javascript
概述javascript在Google IE中的调试技巧
Nov 24 #Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 #Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 #Javascript
值得分享的Bootstrap Table使用教程
Nov 23 #Javascript
AGC(1) 74HC4066(1) 模拟人生(1) 大话西游(1) 绿林侠盗(1) 吸血鬼(1) FS1016(1) 原神(1) 铁拳(1) 死亡搁浅(1)
You might like
星际流派综述
2020/03/04 星际争霸
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
laravel model 两表联查示例
2019/10/24 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
vue上传图片组件编写代码
2017/07/26 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
Vue3 的响应式和以前有什么区别，Proxy 无敌？
2020/05/20 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
浅谈HTML5 服务器推送事件（Server-sent Events）
2017/08/01 HTML / CSS
中国海淘族值得信赖的海淘返利网站：55海淘
2017/01/16 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
儿媳婚宴答谢词
2014/01/14 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
初三化学教学反思
2016/02/22 职场文书
手残删除python之后的补救方法
2021/06/26 Python
未发现nvidia显卡怎么办？Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技