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

纯javascript制作日历控件

Posted in Javascript onJuly 17, 2015

以前要用到日历控件都是直接从网上下载一套源码来使用，心里一直有个梗，就是想自己动手写一个日历控件，最近刚好来了兴趣，时间上也允许，于是自己摸索写了一个，功能还算完善，界面就凑合了。可能最值得说的一点就是让input控件内部右边显示一个按钮，我是直接给input加了个背景，然后把input的边框去掉实现的。

这个是最初版的，再往后打算做出纯javascript版的，再往后打算用JQuery做一套。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>日历控件</title>
<style>
#date_text {
  background-image: url(images/input.png);
  background-repeat:no-repeat;
  width: 198px;
  height: 27px;
  border:none;
  padding-left:5px;
  cursor:pointer;
}

#cal_body {
  width: 198px;
  height: auto;
  overflow:hidden;
  border: solid 1px #CCCCCC;
  display: none;
  position:absolute;
  z-index:10;
}

.line {
  width:100%;
  height:26px;
  float:left;
  background-color:#0FF;
  font-size:14px;
}

.cube {
  float:left;
  width:26px;
  height:26px;
  line-height:26px;
  text-align:center;
  margin-left:2px;
  margin-bottom:2px;
}

.btn {
  float:left;
  background-color:#CCC;
  margin-left:10px;
  width:20px;
  height:20px;
  text-align:center;
  line-height:20px;
  border-radius:3px;
  border:solid 1px;
  margin-top:2px;
  cursor:pointer;
}

.year_month {
  float:left;
  margin-left:10px;
  width:90px;
  height:19px;
  text-align:center;
  line-height:19px;
  border-radius:6px;
}

.end_tag {
  height:26px;
  line-height:26px;
  margin-left:10px;
}
</style>
<script>
Date.prototype.toFormatString = function(){
  var result = this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate();
  return result;
};
  
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"); //包含所有小月的数组 

//判断数组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 hideCalendar(){
  var calbody = document.getElementById("cal_body");
  cal_body.style.display = "none";
}

function showCalendar(){  
  var calbody = document.getElementById("cal_body");
  var style = getDefaultStyle(calbody,"display");
  if(style == "none")
    cal_body.style.display = "block";
  if(style == "block")
    cal_body.style.display = "none";
  
  var date_text = document.getElementById("date_text");
  var val = date_text.value;
  init(val);
}

function init(val){  
  clearCube();
  
  var temp_date;
  var date_text = document.getElementById("date_text");
  if(val == ""){
    temp_date = today;
    date_text.value = today.toFormatString();
  }
  else{
    temp_date = new Date(val);    
  }
    
  var year = temp_date.getFullYear();
  var month = temp_date.getMonth() + 1;
  var 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 = start; i < end; i++){
    var cube = document.getElementsByClassName("cube").item(i);
    cube.innerHTML = i - start + 1;
    
    cube.style.cursor = "pointer";
    cube.onmouseover = function(){
      this.style.backgroundColor = '#0FF';
    }
    if(date == (i - start + 1))
      cube.style.backgroundColor = '#0FF';
    else{
      cube.onmouseout = function(){
        this.style.backgroundColor = '';
      }
    }
    cube.onclick = function(){
      date_text.value = year + "-" + month + "-" + this.innerHTML;
      
      cal_body.style.display = "none";    
    }
  }
  
  document.getElementById("text_year").value = year;
  document.getElementById("text_month").value = month;
}

function clearCube(){
  for(var i=7; i < 49; i++){
    var cube = document.getElementsByClassName("cube").item(i);
    cube.innerHTML = "";
    cube.style.backgroundColor = "";
  }
}

function yearDown(){
  if(isValidated()){
    var old_year = parseInt(document.getElementById("text_year").value);
    if(old_year > 1960){
      var year = old_year - 1;
      var month = parseInt(document.getElementById("text_month").value);
      var val = year + "-" + month + "-" + 1;
      init(val);
    }
  }
}

function yearUp(){
  if(isValidated()){
    var old_year = parseInt(document.getElementById("text_year").value);
    if(old_year < 2050){
      var year = old_year + 1;
      var month = parseInt(document.getElementById("text_month").value);
      var val = year + "-" + month + "-" + 1;
      init(val);
    }
  }
}

function monthDown(){
  if(isValidated()){
    var old_month = parseInt(document.getElementById("text_month").value)
    if(old_month > 1){
      var year = parseInt(document.getElementById("text_year").value);
      var month = old_month - 1;
      var val = year + "-" + month + "-" + 1;
      init(val);
    }
    else {
      var year = parseInt(document.getElementById("text_year").value) - 1;
      var month = 12;
      var val = year + "-" + month + "-" + 1;
      init(val);
    }
  }
    
}

function monthUp(){
  if(isValidated()){
    var old_month = parseInt(document.getElementById("text_month").value)
    if(old_month < 12){
      var year = parseInt(document.getElementById("text_year").value);
      var month = parseInt(document.getElementById("text_month").value) + 1;
      var val = year + "-" + month + "-" + 1;
      init(val);
    }
    else {
      var year = parseInt(document.getElementById("text_year").value) + 1;
      var month = 1;
      var val = year + "-" + month + "-" + 1;
      init(val);
    }
  }
}

function isValidated(){
  var year = document.getElementById("text_year").value;
  var month = document.getElementById("text_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("text_year").value;
    var month = document.getElementById("text_month").value;
    var val = year + "-" + month + "-" + 1;
    init(val);
  }
}

function getDefaultStyle(obj,attribute){ 
   return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}
</script>
</head>

<body>
<div id="container">
<div id="input_bg"><input id="date_text" type="text" readonly onClick="showCalendar()" /></div>
<div id="cal_body">
  <div class="line"><div class="btn" id="year_down" onClick="yearDown()">-</div><input class="year_month" id="text_year" value="2015" onChange="changed()"><div class="btn" id="year_up" onClick="yearUp()">+</div><span class="end_tag">年</span></div>
  <div class="line"><div class="btn" id="month_down" onClick="monthDown()">-</div><input class="year_month" id="text_month" value="5" onChange="changed()"><div class="btn" id="month_up" onClick="monthUp()">+</div><span class="end_tag">月</span></div>
  <div class="cube">日</div>
  <div class="cube">一</div>
  <div class="cube">二</div>
  <div class="cube">三</div>
  <div class="cube">四</div>
  <div class="cube">五</div>
  <div class="cube">六</div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
  <div class="cube"></div>
</div>
<div>
</body>
</html>

以上所述就是本文的全部内容了，希望大家能够喜欢。

纯javascript制作日历控件

- Author -

hebedich

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

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
判断ie的两种简单方法
Aug 12 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
JavaScript执行机制详细介绍
Dec 06 Javascript
javascript生成不重复的随机数
Jul 17 #Javascript
jQuery实现径向动画菜单效果
Jul 17 #Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 #Javascript
用svg制作富有动态的tooltip
Jul 17 #Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 #Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 #Javascript
JS判断页面是否出现滚动条的方法
Jul 17 #Javascript
热力图(1) RTX 3050 ti(1) cudn(1) 字符画(1) callback(1) 脚本(1) webpack(1) cudnn(1) Git(3) dict(1)
You might like
简单采集了yahoo的一些数据
2007/02/14 PHP
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
从零开始学YII2框架（五）快速生成代码工具 Gii 的使用
2014/08/20 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
php实现倒计时效果
2015/12/19 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
javascript五图轮播切换实用版
2012/08/17 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
提交按钮的name＝'submit'引起的js失效问题及原因
2015/02/25 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
python+opencv轮廓检测代码解析
2018/01/05 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
美国领先的男士和女士内衣购物网站：Freshpair
2019/02/25 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
院药学专业个人求职信
2013/09/21 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
教师考察材料范文
2014/06/03 职场文书
会计学专业求职信
2014/07/17 职场文书
住房抵押登记委托书
2014/09/27 职场文书
分居协议书范本（律师见证版）
2014/11/26 职场文书
毕业生评语大全
2015/01/04 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
Python中for后接else的语法使用
2021/05/18 Python
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python