`
tuposky
  • 浏览: 84561 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

自己写了个JS日历控件与大家分享

阅读更多




一时兴起用原生态JS写了个日历控件,不依赖js框架。
特地与大家分享下,供大家使用
与大家一起学习进步。

/* 
使用方法介绍:
在html里加上如下文本框则可
<input type="text" id="txt_calendar" onfocus="showCal()"/> 
 为了计算弹出来的位置这里文本框ID必须为txt_calendar
后续可以改成取其他属性的值或者写个 方法把id当参数传入
主要功能介绍:
鼠标滚轮上滚翻倒上一个月
鼠标滚轮下滚翻到下一个月
方向键的左右键分别控制上月和下月
空格键显示到当前月份
Esc键关闭控件
*/
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth()+1;
var day = d.getDate();
//年月日之间的分隔符
var splitStr="-";
//日期选择
var weekDays = new Array("日","一", "二", "三", "四", "五", "六"); 
var months = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"); 
var lastDay = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 
//判断是否为闰年   
function isBissextile(year){   
 var isBis = false;   
 if (0==year%4&&((year%100!=0)||(year%400==0))) {   
  isBis = true;   
 }   
 return isBis;   
}   
//计算某月的总天数,闰年二月为29天   
function getMonthCount(year,month){   
 var Mcount = lastDay[month-1];   
 if((month==2)&&isBissextile(year)){
  Mcount++;
 } 
 return Mcount;   
}   
//计算某天是星期几
function thisWeekDay (year,month,date){
 var d = new Date(year,month-1,date);
 return d.getDay();
}
//先画一个div
document.write('<div style="display: none;position: absolute;z-index:10" id ="div_calendar"></div>');

//构建日历框
function cal(thisYear,thisMonth){
 var calendarDocument = '<table style="border:1px solid teal;" cellspacing="7" >';
  calendarDocument += '<tr><td colspan="6" style="cursor:hand;" align="center" onClick="getThisDay()">';
  calendarDocument += year+"年"+month+"月"+day+"日";
  calendarDocument += '</td>';
  calendarDocument +='<td style="cursor:hand;">';
  calendarDocument +='<span id="span_close" onClick="hiddenCal()"><font size="1">[关闭]</font></span>';
  calendarDocument +='</td></tr>';
  calendarDocument += '<tr><td>';
    calendarDocument += '<span id="backMonth" style="cursor:hand;" onClick="backMonthClick()">←<span>';
   calendarDocument += '</td>';
   calendarDocument += '<td colspan="5" align="center">';
    //构建年份下拉框[1900-2099]年
    calendarDocument +="<select id ='sel_year' onChange='changeYM()'>";
    for(var i = 1900;i<=2099;i++){
     calendarDocument +="<option value="+i+">"+i+"</option>";
    }
    calendarDocument +="</select>";
    calendarDocument += "年";
    //构建月份下拉框
    calendarDocument +="<select id ='sel_month' onChange='changeYM()'>";
    for(var i = 1;i<=12;i++){
     calendarDocument +="<option value="+i+">"+i+"</option>";
    }
    calendarDocument +="</select>";
    calendarDocument += "月";
   calendarDocument += '</td>';
   calendarDocument += '<td>';
    calendarDocument += '<span id="nextMonth" style="cursor:hand;" onClick="nextMonthClick()">→<span>';
   calendarDocument += '</td>';
  calendarDocument += '</tr>';
  calendarDocument += '<tr>';
   //输出星期
   for(var i = 0 ;i<weekDays.length;i++){
    //周末标红
    if(weekDays[i]=='日' || weekDays[i] == '六'){
     calendarDocument+='<td align="center" style="color:red">'+weekDays[i]+'</td>';
    }else{
     calendarDocument+='<td align="center">'+weekDays[i]+'</td>';
    }
   }
   calendarDocument+="</tr>";
   
   //输出天数
   calendarDocument+="<tr>";
   //算出当前年月1号是星期几
   var thisWeek = thisWeekDay(thisYear,thisMonth,1);
   if(thisWeek !=7){
    for (var sw = 0;sw<thisWeek;sw++){
     calendarDocument+='<td></td>';
    }
   }
   //开始循环输出当月天数
   for (var i = 1; i < getMonthCount(thisYear,thisMonth)+1; i++){
    //今天
    if(thisYear==year && thisMonth == month && i== day){
     //今天是周末
     if(thisWeekDay(thisYear,thisMonth,i)==6 || thisWeekDay(thisYear,thisMonth,i)==0){
      calendarDocument+='<td onClick="setInput('+i+')" align="center" style="border:1px solid blue;color:red;cursor:hand;">'+i+'</td>';
     }else{
      calendarDocument+='<td onClick="setInput('+i+')" align="center" style="border:1px solid blue;cursor:hand;">'+i+'</td>';
     }
    }else{
     //周末标红
     if(thisWeekDay(thisYear,thisMonth,i)==6 || thisWeekDay(thisYear,thisMonth,i)==0){
      calendarDocument+='<td onClick="setInput('+i+')" align="center" style="color:red;cursor:hand;">'+i+'</td>';
     }else{
      calendarDocument+='<td onClick="setInput('+i+')" onmouseover="mouseOver(this);" onmouseout="mouseOut(this)"align="center" style="cursor:hand;">'+i+'</td>';
     }
    }
    //星期六换行
    if(thisWeekDay(thisYear,thisMonth,i)==6){
     calendarDocument+="</tr>";
     calendarDocument+="<tr>";
    }
   }   
  calendarDocument += '</tr>';
 calendarDocument += '</table>';
 //将构建好的控件字符串追加给div
 document.getElementById('div_calendar').innerHTML=calendarDocument;
 //默认选择当前年
 document.getElementById('sel_year').value=thisYear;
 //默认选择当前月
 document.getElementById('sel_month').value=thisMonth;
}
//全局变量——保存当前选择的年月
var fullYear = year;
var fullMonth = month;
//上个月
function backMonthClick(){
 if(fullMonth ==1){
  fullYear=fullYear-1;
  fullMonth = 12;
 }else{
  fullMonth=fullMonth-1;
 }
 cal(fullYear,fullMonth); 
}
//下个月
function nextMonthClick(){
 if(fullMonth ==12){
  ++fullYear;
  fullMonth = 1;
 }else{
  ++fullMonth;
 }
 cal(fullYear,fullMonth); 
}
//年月下拉框
function changeYM(){
 fullYear = document.getElementById('sel_year').value;
 fullMonth = document.getElementById('sel_month').value;
 cal(fullYear,fullMonth);
}
//当前日
function getThisDay(){
 fullYear = year;
 fullMonth = month;
 cal(fullYear,fullMonth);
}
//显示控件
function showCal(){
 cal(year,month);
 //计算显示控件位置
 var x = document.getElementById('txt_calendar').offsetLeft;
 var y = document.getElementById('txt_calendar').offsetTop +22;
 document.getElementById('div_calendar').style.left=x+"px";
 document.getElementById('div_calendar').style.top= y+"px";
 document.getElementById('div_calendar').style.display = "";
}
//隐藏控件
function hiddenCal(){
 document.getElementById('div_calendar').style.display = "none";
}
//选择日期
function setInput(selDay){
 document.getElementById('txt_calendar').value=fullYear+splitStr+fullMonth+splitStr+selDay;
 hiddenCal();
}
//鼠标移进时
function mouseOver(obj){
 obj.style.color="blue";
}
//鼠标移出时
function mouseOut(obj){
 obj.style.color="";
}
//键盘响应
document.onkeydown=function(e)   
{
 //浏览器兼容
 var thisEvent=e || window.event;
   var keyCode = thisEvent.keyCode || thisEvent.which;
 //如果控件是隐藏状态
 if(document.getElementById('div_calendar').style.display == "none"){
  return false;
 }
 switch(keyCode){
  case 32://空格
  getThisDay();break;
  case 27://Esc
  hiddenCal();break;
  case 37://left
  backMonthClick();break;
  case 39://right
  nextMonthClick();break;
 }
}

/*模拟windows7日历 鼠标滑轮滚动翻页*/
var direct ;
var scrollFunc=function(e){
 //浏览器兼容
 var thisEvent=e || window.event;
 //IE,Opera,Chrome,safari
 if(thisEvent.wheelDelta){
     direct = thisEvent.wheelDelta;
 }
 else if(thisEvent.detail){//Firefox
     direct = thisEvent.detail;
 }
 /*  Firefox 接收 +3 和 -3
  其他浏览器接收 +120 和-120
  +数表示鼠标向上滑动,-数表示向下滑动
 */
 //如果控件是隐藏状态
 if(document.getElementById('div_calendar').style.display == "none"){
  return false;
 }
 //向上滑动,调用上一个月
 if(direct=="120" || direct=="3"){
  backMonthClick();
 //向下滑动,调用下一个月
 }else if(direct=="-120" || direct=="-3"){
  nextMonthClick();
 }
}
//注册监听事件
if(document.addEventListener){
 //W3C
 document.addEventListener('DOMMouseScroll',scrollFunc,false);
}else{
 //IE,Opera,Chrome,safari
 document.onmousewheel = scrollFunc;
}



我所有的博客都搬到csdn了,以后所有的博客都会在csdn上更新,
CSDN博客地址:http://blog.csdn.net/tuposky

 

  • 大小: 62.9 KB
分享到:
评论
1 楼 cpszy 2011-12-15  
mark!

相关推荐

    6个JS日历控件个JS日历控件

    JavaScript(JS)日历控件是网页开发中常用的一种组件,用于展示日期选择功能,通常在表单中作为输入辅助工具出现。它们可以提供用户友好的界面,方便用户选择日期,而无需手动输入。以下是对JS日历控件的一些详细...

    html js脚本日历控件

    7. **兼容性**:考虑到浏览器的多样性,编写JavaScript日历控件时需要关注跨浏览器的兼容性问题,确保在不同的浏览器(如Chrome、Firefox、Safari、Edge和IE)上都能正常工作。 在提供的文件名中,"calendar.html"...

    js 日历控件 calendar 漂亮日历控件

    总之,JavaScript日历控件是一个结合了前端技术与用户体验设计的组件,通过JavaScript的动态特性,我们可以创建功能丰富、用户友好的日期选择工具。在实际项目中,还可以考虑与其他库(如jQuery、React或Vue)集成,...

    js日历控件优化

    这里我们将深入探讨如何优化JavaScript日历控件,特别是那些包含时分秒选择,以及支持年月日显示的组件。 1. **性能优化**:在创建日历控件时,减少DOM操作是关键。利用虚拟DOM或仅在必要时更新DOM可以显著提升性能...

    一个js写的日历控件

    在这个场景中,我们讨论的是一个用JS编写的日历控件,其目的是为了帮助用户在预订酒店时方便地选择入住日期和离店日期。这种控件在电子商务、旅游预订和各种在线服务网站中非常常见。 日历控件的基本功能包括展示一...

    js日历控件 js日历控件

    总的来说,JavaScript日历控件是网页交互中不可或缺的一部分,它的实现涉及前端多个技术层面,从基础的HTML/CSS/JS到复杂的库使用和性能优化。理解其工作原理并灵活运用,能帮助开发者创建出更高效、更易用的网页...

    史上最强js日历控件

    总的来说,"史上最强js日历控件"可能是一个集成了各种高级特性和自定义选项的JavaScript日历组件,它可以帮助开发者快速地在网页应用中实现强大的日期选择功能。通过深入研究和理解提供的压缩包内容,开发者可以有效...

    js 日历控件 calendar

    js 日历控件 calendar,js 日历控件 calendar,js 日历控件 calendar,js 日历控件 calendar,js 日历控件 calendar,js 日历控件 calendar

    JavaScript日历控件 六种日历

    JavaScript日历控件是网页开发中常用的一种交互元素,它能帮助用户方便地选择日期,常见于表单输入、事件安排或时间相关的功能。在给定的资源中,包含了六种不同样式的JavaScript日历,这些日历可能具有不同的设计...

    js日历控件 英文版

    JavaScript日历控件是网页应用中常见的一种交互元素,它允许用户方便地选择日期,常用于事件安排、预订系统或表单输入等场景。在这个英文版的JS日历控件中,开发者为英文操作系统的用户提供了友好的界面和功能。 ...

    简单好看的js日历控件

    在网页设计中,一个简单好看的js日历控件可以极大地提升用户体验,尤其是在需要用户输入或选择日期的场景。 创建一个js日历控件,主要涉及以下几个知识点: 1. **DOM操作**:JavaScript通过Document Object Model...

    js日历 控件 集合

    - **FullCalendar**: 这是一个全功能的JavaScript日历组件,支持显示日程、周视图和月视图,可以与其他数据源(如Google Calendar或JSON)集成,适合构建复杂的日历应用。 - **Pickadate.js**: 这是一个轻量级且...

    6种JavaScript日历控件

    JavaScript日历控件是网页开发中常用的一种交互元素,它为用户提供了一个直观的方式来选择日期,常见于表单、事件管理或在线预订系统等场景。在本文中,我们将深入探讨六种不同的JavaScript日历控件,了解它们的特点...

    简单的JS日历控件

    JavaScript(JS)日历控件是一种常见的前端交互元素,它为用户提供了一个直观的方式来选择日期,常见于表单输入、事件预订或时间相关的功能。在这个开源项目中,经过修改的控件提供了一种简单且高效的方式来集成到...

    JS日历控件(可选多个日期、很简单)

    总的来说,这个"JS日历控件"是一个实用的教学资源,适合想要学习JavaScript前端开发的初学者。通过研究这个控件,不仅可以掌握日历控件的实现,还能提升对JavaScript事件处理、DOM操作和浏览器兼容性的理解。

    js 日历控件

    JavaScript日历控件是一种在网页上实现日期选择功能的交互元素,它允许用户通过图形界面轻松选择日期,常用于表单填写、事件预订等场景。本文将深入探讨JS日历控件的实现原理、特点以及如何在实际项目中应用。 一、...

    js日历控件实例源码

    这个实例源码是一个学习和理解JavaScript日历控件工作原理的好材料。你可以通过阅读和分析代码,了解如何使用JavaScript和DOM操作实现一个功能完整的日历组件。同时,也可以根据实际需求对其进行修改和扩展,以满足...

    JS日历控件,日历控件

    总结,JS日历控件是JavaScript在网页交互中的一个重要应用,它结合了DOM操作、事件处理、日期管理等多个JavaScript核心技术。通过实践和学习,开发者可以创建出功能强大、用户体验优良的JS日历控件,提升网站或应用...

    多个JS日历控件,适合.net使用(有图)

    在.NET开发环境中,JavaScript(JS)日历控件是一种常见的前端交互元素,它允许用户方便地选择日期,常用于表单填写或者时间相关的功能。本文将深入探讨标题提及的两个适用于.NET环境的JS日历控件及其使用方法。 ...

Global site tag (gtag.js) - Google Analytics