纯手工js+Jquery打造的日历（根据一个网友自编的简单的js日历改造的）

最新推荐文章于 2024-10-11 20:24:23 发布
最新推荐文章于 2024-10-11 20:24:23 发布
阅读量4.2k 收藏 3
点赞数
分类专栏： 技术 文章标签： jquery js 日历 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011681370/article/details/16019407
版权

调用：new Calendar("calTable","date","selectYear","selectMonth",2000,2020); 前四个参数都是一些ID，最后两个，前一个是日历的起始年份，后一个是日历的结束年份，若不写，默认当年为结束年份

首先看一下效果：


单击选中的效果是天蓝色：代码中设置了可以选中的时间范围，白色的为可以操作选中的范围：，灰色为不可以操作的范围：

全选的效果：



单击保存，弹出选中的时间：



废话不多说，来看一下代码，因为做项目需要，其中加入了bootstrap2.0，一些控件是用bootstrap的。

<!DOCTYPE html>
<html lang="zh-CN" manifest="cache.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日历</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
*{ margin:0; padding:0;}
.red{ color:red;}
.date{ cursor:pointer;}
.today{ background:#F90; font-weight:bold;cursor:pointer;}
#calendar{ width:400px; margin:50px auto; }
#date{ text-align:center; border:1px #ccc solid; border-bottom:0;}  
#date a{ display:inline-block; width:18px; height:20px; background-position:center -20px; vertical-align:middle; cursor:pointer;}
#date #selectDate{ width:90px;margin-top:5px;}
#preYear{ background:url(img/preYear.gif);}
#preMonth{ background:url(img/preMonth.gif);}
#nextMonth{ background:url(img/nextMonth.gif);}
#nextYear{ background:url(img/nextYear.gif);}
#calTable{ width:100%; border-collapse:collapse;}
#calTable th,#calTable td{ width:70px; height:40px; border:1px #ccc solid; text-align:center;}
#calTable tbody{ font-family:Georgia, "Times New Roman", Times, serif;}
.td_on{ background:#CFE6FE;} 
</style>
</head>

<body>

<div id="calendar">
 <div id="date">
     <a id="preMonth" title="上一年"></a>
        <a id="preYear" title="上一月"></a>
        <span id="selectDate" class="help-inline">
            <select id="selectYear" class="input-small"> 
            </select>
           
        </span>
		  <span id="selectDate" class="help-inline">
		   <select id="selectMonth" class="input-small">
                <option value="1">1月</option>
                <option value="2">2月</option>
                <option value="3">3月</option>
                <option value="4">4月</option>
                <option value="5">5月</option>
                <option value="6">6月</option>
                <option value="7">7月</option>
                <option value="8">8月</option>
                <option value="9">9月</option>
                <option value="10">10月</option>
                <option value="11">11月</option>
                <option value="12">12月</option>
          </select>
		  </span>
        <a id="nextYear" title="下一月"></a>
        <a id="nextMonth" title="下一年"></a>
  </div>
    <table id="calTable">
     <thead>
            <tr>
                <th class="red">日</th>
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th class="red">六</th>
            </tr>
      </thead>
        <tbody>
         <tr>
             <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
          </tr>
            <tr>
             <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
             <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
             <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
             <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
             <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
        </tbody>
    </table>
 <label class="checkbox inline">
  <input type="checkbox" id="SelectAll" onClick="selectAll(this);"> 全选
</label>
<button type="button" class="btn btn-default pull-right" style="margin:5px" οnclick="setTable()">保存</button>
</div>

<script type="text/javascript">
var objjson={}; 
function setTable(){
   var tyear=selectValue($("#selectYear"));
   var tmonth=selectValue($("#selectMonth"));
  $("td.td_on").each(function (){
 var tday = $(this).html();
  if($(this).html()<10){
    tday = "0"+tday;
   }
  var time = tyear +"-"+tmonth+"-"+tday;
  alert(time);  
                  
 });

}
 var selectValue = function(selectObj){
  var selectList=$('option',selectObj);
  for(var i=0,len=selectList.length;i<len;i++){
   var _option=selectList[i];
   if(_option.selected){
    return parseInt(_option.value);
   }
  }
 }



function selectAll(_this){  
    if($(_this).hasClass("currentcheck")){//取消全选
	   $("td.date").removeClass("td_on");
	 }else{//全选
	  $("td.date").addClass("td_on");
	 }
	  $(_this).toggleClass("currentcheck"); 
}  

  var startdate = "2013-11-07";
  var enddate = "2013-12-21";
var doc=document;
function Calendar(){
 this.init.apply(this,arguments);
}
Calendar.prototype={
 init:function(tableId,dateId,selectY,selectM,startYear,endYear){
  var table=doc.getElementById(tableId);
  var dateObj=doc.getElementById(dateId);
  var selectY=doc.getElementById(selectY);
  var selectM=doc.getElementById(selectM);
  this._setSelectYear(selectY,startYear,endYear);
  this._setTodayDate(table,selectY,selectM);
  this._selectChange(table,selectY,selectM);
  this._clickBtn(table,dateObj,selectY,selectM,startYear,endYear);
 },
 //设置年份
 _setSelectYear:function(selectY,startYear,endYear){
  var html="";
  var date=new Date();
  if(!endYear){
   var endYear=date.getFullYear();
  }else{
   var endYear=endYear; 
  }
  for(var i=startYear;i<=endYear;i++){
   var _option=document.createElement('option');
   selectY.appendChild(_option);
   _option.value=i;
   _option.innerHTML=i;
  }
 },
 //设置当天的时间
 _setTodayDate:function(table,selectY,selectM){
  var _this=this;
  var date=new Date();
  var year=date.getFullYear(),month=date.getMonth(),_date=date.getDate(),day=date.getDay();
  var n=parseInt(_date/7);
  var l=n%7;
  
  if(l>=day){
   var todayTd=day+7*l;
  }else{
   var todayTd=day+7*(l+1);
  }
  var startTd=todayTd-_date+1;
  var monthDays=this._getMonthDays(year,month);
  var td=table.getElementsByTagName('td');
  this._setSelectValue(selectY,year);
  this._setSelectValue(selectM,month+1);
  for(i=startTd,len=td.length;i<len;i++){
   var _td=td[i]; 
   var j=i-startTd+1
   _td.innerHTML=j;
    var tday = j;
   if(j<10){
    tday = "0"+j;
   }
   var currentdate=year+"-"+(month+1)+"-"+tday;
   if(currentdate>=startdate&¤tdate<=enddate){
    _td.className="date";
   _td.style.background="";
	_this._clickOn(_td);
   }else{
     _td.style.background="#EEEEEE";
   }
   if(j>=monthDays){
    break;
   }
  }
 },

  //鼠标单击日期
 _clickOn:function(obj){
  obj.οnclick=function(){
   if(this.innerHTML&&$(this).hasClass("date")){
     if($(this).hasClass("td_on")){
	    $(this).removeClass("td_on"); 
		 $("#SelectAll").removeClass("currentcheck");
		 $("#SelectAll").attr("checked",false);
	 }else{
		$(this).addClass("td_on"); 
	 }
   }
  }
 },
 //下拉菜单选择日期
 _selectChange:function(table,selectY,selectM){
  var _this=this;
  selectY.οnchange=function(){
   var year=_this._getSelectValue(selectY);
   var month=_this._getSelectValue(selectM)-1;
   _this._showCalendar(table,year,month);

  }
  selectM.οnchange=function(){
   var year=_this._getSelectValue(selectY);
   var month=_this._getSelectValue(selectM)-1;;
   _this._showCalendar(table,year,month);
  }
 },
 //获取下拉菜单的默认值
 _getSelectValue:function(selectObj){
  var selectList=selectObj.getElementsByTagName('option');
  for(var i=0,len=selectList.length;i<len;i++){
   var _option=selectList[i];
   if(_option.selected){
    return parseInt(_option.value);
   }
  }
 },
 //设置下拉菜单默认值
 _setSelectValue:function(selectObj,value){
  var selectList=selectObj.getElementsByTagName('option');
  for(var i=0,len=selectList.length;i<len;i++){
   var _option=selectList[i];
   if(parseInt(_option.value)==value){
    _option.selected=true;
    break;
   }
  }
 },
 _clickBtn:function(table,dateObj,selectY,selectM,startYear,endYear){
  var _this=this,year=0;
  var btn=dateObj.getElementsByTagName('a');
  btn[0].οnclick=function(){
   year=_this._getSelectValue(selectY)-1;
   var month=_this._getSelectValue(selectM);
   if(!isYearOver(year)){
    return;
   }
   _this._setSelectValue(selectY,year);
   _this._setSelectValue(selectM,month);
   _this._showCalendar(table,year,month-1);
  }
  btn[1].οnclick=function(){
   year=_this._getSelectValue(selectY);
   var month=_this._getSelectValue(selectM)-1;
   if(month<=0){
    month=12;
    year--;
   }
   if(!isYearOver(year)){
    return;
   }
   _this._setSelectValue(selectM,month);
   _this._setSelectValue(selectY,year);
   _this._showCalendar(table,year,month-1);
  }
  btn[2].οnclick=function(){
   year=_this._getSelectValue(selectY);
   var month=_this._getSelectValue(selectM)+1;
   if(month>12){
    month=1;
    year++;
   }
   if(!isYearOver(year)){
    return;
   }
   _this._setSelectValue(selectM,month);
   _this._setSelectValue(selectY,year);
   _this._showCalendar(table,year,month-1);
  }
  btn[3].οnclick=function(){
   year=_this._getSelectValue(selectY)+1;
   var month=_this._getSelectValue(selectM);
   if(!isYearOver(year)){
    return;
   }
   _this._setSelectValue(selectM,month);
   _this._setSelectValue(selectY,year);
   _this._showCalendar(table,year,month-1);
  }
  function isYearOver(year){
   var date=new Date();
   var _endYear=endYear?endYear:date.getFullYear();
   if(year>_endYear||year<startYear){
    alert("超出日期范围");
    return false;;
   }else{
    return true; 
   }
  }
 },
 //显示日历
 _showCalendar:function(table,year,month){
  $("#SelectAll").removeClass("currentcheck");
  $("#SelectAll").attr("checked",false);
  var date=new Date();
  var _year=date.getFullYear();
  var _month=date.getMonth();
  var _date=date.getDate();
  date.setYear(year);
  date.setMonth(month);
  date.setDate(1);
  var day=date.getDay();
  var _this=this;
  var monthDays=this._getMonthDays(year,month);
  var td=table.getElementsByTagName('td');
  for(var k=0;k<td.length;k++){
   td[k].innerHTML="";
   td[k].className="";
   td[k].style.background="";
  }
  for(var i=day,len=td.length;i<len;i++){
   var _td=td[i];
   var j=i-day+1;
   _td.innerHTML=j;
   var tday = j;
   if(j<10){
    tday = "0"+j;
   }
    var currentdate=year+"-"+(month+1)+"-"+tday;
   if(currentdate>=startdate&¤tdate<=enddate){
    _td.className="date";
    _td.style.background="";
	_this._clickOn(_td);
   }else{
     _td.style.background="#EEEEEE";
   }
   if(j>=monthDays){
    break;
   }
  }
 },
 //返回某个月的天数
 _getMonthDays:function(year,month){
  var monthAry=[31,28,31,30,31,30,31,31,30,31,30,31];
  if(year%400==0){
   monthAry[1]=29;
  }else{
   if(year%4==0&&year%100!=0){
    monthAry[1]=29;
   }
  }
  return monthAry[month];
 }
}
new Calendar("calTable","date","selectYear","selectMonth",2000,2020);
</script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</body>
</html>


芳踪_若梦
关注
专栏目录
js制作日历
Wayne_SvuJ的博客
01-21 3296
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...
zhilian笔记
我是一只蘑菇17的博客
11-30 1146
vuetify https://vuetifyjs.com/zh-Hans/ 可参考链接：https://blog.csdn.net/u013089490/article/details/84025743 一、pages/admin/eatUp-----points.vue 1.@submit.prevent 阻止默认事件提交 2.<v-toolbar> 工具栏 ​ flat 删除工具栏的框阴影 color=“whit
JS之简易日历的制作
qq_44586361的博客
02-14 624
下面我为大家分享一个我制作的简易日历，话不多说，直接上代码 body部分 &amp;lt;body&amp;gt; &amp;lt;div id='tab'&amp;gt; &amp;lt;ul&amp;gt; &amp;lt;li class=&quot;active&quot;&amp;gt;&amp;lt;h2&amp;gt;JAN&amp
JS实现日历
最新发布
Cc040909的博客
10-11 945
【代码】JS实现日历。
JS制作日历
yangyalun的博客
04-08 560
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link rel="stylesheet" type="text
js日历制作
上善若水
11-21 268
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
史上最全最新前端面试题（不定期更新，有问题欢迎评论区对线）
lb_nizhanban的博客
06-13 2361
一阶段面试题： CSS浮动怎么理解的 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，也就是脱离文档流，所以文档的普通流中的块框表现得就像浮动框不存在一样。一般使用float来实现浮动，联系=》清除浮动的相关方法。27题 绝对定位相对定位怎么理解 absolute：绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据根元素
php面试题汇总（必会）一：
热门推荐
差不多先生
01-28 3万+
1、酒店预订怎么实现？怎么设计表   你好，我大概的说下我们的业务流程，我们的业务流程是：用户在网站浏览酒店信息，可以根据地区检索出该地区的酒店信息。列表展示酒店的信息由：酒店的名称，酒店图片，酒店位置，评论人数，评论分数以及最低入住价格。用户选中要入住的酒店进入酒店详情页面，查看酒店的介绍以及酒店的房型列表，用户根据他要入住的时间和离店的时间，检索出这个时间段内的所有可选房型（房间数量-当
Hadoop整体框架
爱吃串串的瘦子的博客
07-17 1万+
大数据框架 目录 大数据框架 一、Hodoop 四大组件：HDFS/MapReduce/YARN/Common 二、Zookeeper 三、Hive 四、Spark 五、ETL 六、ngnix 七、Redis 八、Oracle 十一、Jsp/node.js/JQueryEcharts 一、hadoop http://blog.csdn.net/huanglong8/...
java面试题，看我这篇就够了，前端后台应有尽有，包你通过面试
cencong863251的博客
04-03 3085
HTML&CSS部分 1、HTML中定义表格的宽度用80px和80%的区别是什么？ PX标识像素，%标识整个父标签宽度百分比 2、CSS样式定义优先级顺序是？ 内联样式最高优先权，然后是内部样式，然后才是外部样式 3、div和span的区别？ 　　DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表（共同点）。 　　两者最明显的区别在于DIV...
一个比较强大的JS做的日历
04-07
var solarMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); var solarMonth1 = new Array(31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); var Gan = new Array("甲", "乙", "丙", "丁", "戊", "己", "庚", "辛", "壬", "癸"); var Zhi = new Array("子", "丑", "寅", "卯", "辰", "巳", "午", "未", "申", "酉", "戌", "亥"); var Animals = new Array("鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊", "猴", "鸡", "狗", "猪"); var solarTerm = new Array("小寒", "大寒", "立春", "雨水", "惊蛰", "春分", "清明", "谷雨", "立夏", "小满", "芒种", "夏至", "小暑", "大暑", "立秋", "处暑", "白露", "秋分", "寒露", "霜降", "立冬", "小雪", "大雪", "冬至")
js实现的日历控件(经典好用)
06-16
js实现的日历控件 js实现的日历控件 js实现的日历控件 js实现的日历控件
日历js源代码
12-01
打开页时,在下拉列表中显示当前年月,显示公历和农历的相关信息 中文显示农历的日期 判断的农历中那个月是闰月,不是闰月 算出当前月第一天的农历日期和当前农历日期下一个月农历的第一天日期
六款不错的js编写的日历代码
10-27
有的js放到MyEclipse下回出错，只要该下顺序例如 有个函数为 function document.onclick(){ } 将其改为 document.onclick = function(){ }
原生js组件化展示全年日历实现
04-02
原生js实现全年日历展示,组件化封装所有函数,代码注释,风格简约
 js制作日历
上善若水
06-15 381
制作日历： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .ri.
js简单日历制作
Cover_face
07-22 989
代码】js简单日历制作。
js制作简易日历
乃乃天外仙
03-14 418
innerHTML的使用： <div id="test"> <span style="color:red">index</span> saxibuli </div> 在上面代码中使用test.innerHTML,test.innerText,test.outerHTML： 语句 解释 举例 innerHTML 从对象的起始位置...
PHP+MySQL+jQuery打造月度签到日历实战
本文将详细介绍如何使用PHP、MySQL和jQuery来实现一个日历签到功能，以便在网站开发中增加用户的互动性和激励机制。以下将逐步阐述实现过程中的关键步骤和注意事项。 1. **日历签到样式设计**：首先，前端界面需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值