纯javascript制作日历控件

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

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

时间: 2015-07-14

JS实现一个简单的日历

主要分为三个部分,1:获取li元素 2:如何填写对应的日期 3:如何获取点击li元素的事件. 1:通过节点间关系的属性children 获取li元素(两个for循坏遍历): 2:在遍历填写日期时,在第一行判断在当月的第一天在星期几,然后从第一天开始填写,直到大于当月的天数就暂停填写,并开始填写下个月的日期.第一行上个月的日期显示  : 上月天数显示开始值 = 计算上个月的天数 - 这个月开始的第一天在星期几的值 -1,然后在第一行上月天数显示开始值自加. 3:利用JS的事件冒泡获取li的inne

JS显示日历和天气的方法

本文实例讲述了JS显示日历和天气的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

js实现日历与定时器

简单的日历,会根据系统日期自动调整对应的日期,每60秒切换一次名言.只要有想法,做出来还是可以与众不同的. 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .calendar { width: 300px; height: 36

javascript html实现网页版日历代码

本文实例为大家分享了网页版日历代码,供大家参考,具体内容如下 效果图: 实现代码: <html> <head> <link rel="stylesheet" type="text/css" href="Skin.css"> <style> <!-- table{ text-align: center } --> </style> </head> <body&

js编写当天简单日历效果【实现代码】

之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日历的实现原理.自己也尝试着做了一下,收获蛮大,掌握了基本的实现原理后,再想增加更多的功能,完全就可以自由发挥了,先在这里分享一下吧,有兴趣的可以试试! 一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解

js css+html实现简单的日历

web页面中很多地方都会用到日历显示,选择等,本文用html.css.javascript实现简单的日历.完成以后的效果与页面左侧的效果差不多,可以切换上个月.下个月.也可以根据实际情况进行扩展. html html部分比较简单,声明一个div,具体的html用javascript生成.整体内容大概是这样的: <!doctype html> <html> <head> <meta charset='utf-8'> <link rel='styleshe

纯js简单日历实现代码

复制代码 代码如下: <!doctype html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body,ul,li,h2,p { margin:0px; pa

原生js制作日历控件实例分享

本文实例为大家分享了js实现一个简单的日历控件,供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>date</title> <style type="text/css"> *{ margin:0; padding:0;} a{ text-decoration:none

原生js开发的日历插件

效果如下所示: 代码如下: <style type="text/css"> * { margin: 0; padding: 0; } ul, li { list-style: none; } #week { width: 350px; height: 350px; border: 1px solid #ccc; } #week h6 { font-size: 20px; overflow: hidden; height: 40px; line-height: 40px; }

JavaScript制作简单的日历效果

本文实例为大家分享了 <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title></title> </head> <body> <script> document.write("<table>"); document.write("<th colspan='7'>

JavaScript实现简单的日历效果

只是个简单的日历模板,各位可根据需要自行添加需要的功能.该模板更多的是提供了关于年.月.日.月初.月末.星期的获取函数.各位可根据需要自行获取.欢迎提供更简便的方式方法,互相学习提高!谢谢~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>日历</title> <style type="

JavaScript制作弹出层效果

先给大家展示下效果图,效果图如下所示: 1.引用相关easyui.min.js,easyui-lang-zh_CN.js 等js 文件: 2.前台代码 <input type="text" id="txt_Type" style="display:none" /> <div class="macFormItem" id="divSQXLH" runat="server"

JavaScript实现简单贪吃蛇效果

本文实例为大家分享了js实现简单贪吃蛇效果的具体代码,供大家参考,具体内容如下 上代码之前,先给大家看一下效果: 是不是想说:我能这样玩一天- 话不多说,代码如下: <script> class Map{ constructor(){ // 提前设定将来的地图的样式数据 this.w = 450; this.h = 250; this.c = "#DDD"; // 执行创建地图方法 this.createEle(); } createEle(){ this.mapEle =

原生JavaScript制作微博发布面板效果

javaScript实现微博发布面板效果.采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninput.onpropertychange等事件 动态添加元素,获取设置动态属性 基本思路: 当内容为空时,发布按钮为灰色,点击时候文本框会闪动,输入文字会提示还可以输入多少文字,超出会提示,且不能发布,要注意的是,判断文本框内容的长度,不能直接来,因为英文属于一个字节,中文占两个,要用正则处理一下! 获取到所有头像的s

JavaScript制作简单的框选图表

故事背景:这几天遇到一个客户,是做会议记录的,每次会议过程中,都会有特定设备记录下讲话人的位置以角度值显示.他给我角度值,让我给他做一个图表来展示每个人的一个大概位置. 客户想到的是用 Echarts 图表来做,我首先想到的也是用 Echarts ,但是思考了他的要求以后,发现就一个简单的框选图表用 Echarts 来做是不是大材小用了,而且还要导入那么多的没用的代码. 于是我想到了用 canvas 画布来仿着做,但又考虑了一下, canvas 操作起来不顺手:究竟可不可以用普通的css结合 j

JavaScript实现简单进度条效果

本文实例为大家分享了JavaScript实现进度条效果的具体代码,供大家参考,具体内容如下 效果图: 简单说一下思路: 主要就是进度条的宽度的动态调整!要用到JS的间隔定时器 setInterval( ) setInterval( ) 功能:每隔指定时间调用一次函数 参数:函数,时间间隔 返回值:定时器编号(数字) 想让它到一定的宽度就停止,那么需要设定它的最大宽度,在它外面套一个有宽度的元素就可以啦!这样的话控制它在父元素里的百分比就行了. 在函数里进行判断是否道达指定宽度,没有到达就增长,否

JavaScript实现简单的弹窗效果

本文实例为大家分享了JavaScript实现弹窗效果的具体代码,供大家参考,具体内容如下 使用css动画效果实现弹窗缓慢弹出和收回. 使用JavaScript实现定时弹出定时收回. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单弹窗</title> <style> * { margin:

基于javascript制作微博发布栏效果

本文为大家分享了做微博发布栏效果的过程,涉及到的知识点包括以下: 1.判断IE的方法:直接用  var ie=!-[1,];即可 2.连续发生事件的用法:  IE下:触发对象.onpropertychange  标准下:触发对象.oninput 3.焦点聚集和移开事件.onfocus和onblur 4.判断单字节(0-255之间)与双子节:正则表达式:/[^\x00-\xff]/g 代码如上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

vue实现简单的日历效果

最近在项目中遇到了一个需求,在vue中创建一个组件,这个组件显示的是当前的日期,以及在当前的日需要处理的事项,处理的事项的信息会以后端的接口的形式返回. 需求确认后,搭建了一下,在这里记录了一下,现在是简单的实现了这个需求,但是肯定的是后期需要进行修改. vue就不多说了,在vue中使用的是原生JS 效果图(基本没有样式,很low) 现在实现的都是最初级的版本,代码里面的容错,还有一些性能上的处理,并没有书写. 不多说,上代码: 首先是vue的html结构,很简单,里面添加了一些其他时间形式的显