javascript代码实例教程-JS 日历
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS 日历，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
实现功能：
1，年份按此年份前后各10年选区范围，同时提供自由选取
2，月份选取
3，日期的点击选取
4，FF浏览器支持不好！！
下面的代码没有将js分离，如果需要，直接分离就可以了
<!DOCTYPE htML>
<head>
<;meta charset='utf-8' />
<script type='text/javascript' src='./nino_calendar.js' ></script>
</head>
<body>
<p id='calendar'>
</p>
</body>
<style type='text/css' >
#calendar{ margin:20px auto; width:200px;}
tr#nino_calendar_weekname,td.nino_calendar_tomonth,td.nino_calendar_nottomonth,td.nino_calendar_today{ font-family:"Arial","Microsoft Yahei"; text-align:center; padding:3px; cursor:crosshair;}
tr#nino_calendar_weekname td {background:#EEE; color:#000; }
tr#nino_calendar_weekname td:hover{background:#666; color:#FFF;}
td.nino_calendar_tomonth{ background:#EEE; color:#000;}
td.nino_calendar_tomonth:hover{background:#666; color:#FFF;}
td.nino_calendar_nottomonth{ background:#EEE; color:#FFF;}
td.nino_calendar_nottomonth:hover{background:#CCC; color:#666;}
td.nino_calendar_today{ background:#999; color:#FFF;}
td.nino_calendar_today:hover{background:#666; color:#FFF;}
input#nino_calendar_year_i,input#nino_calendar_month_i,input#nino_calendar_day_i{ width:40px;}
select#nino_calendar_year_select,select#nino_calendar_month_select{background:#444; color:#FFF;}
input#nino_calendar_b{ width:100%;}
</style>
<script type='text/javascript' >
/*
Calendar
use Nino_Calendar.setCalDays(2012,2,2)
Copyright 2013, EI Nino
Email: Jinyachen@gmail.COM
*/
function stopBubble(){
if (window.event) {
event.cancelBubble=true;
} else {
event = arguments[0];
event.stopPropagation();
}
}
VAR Nino_Calendar = {
idName : "calendar",
calId:"nino_calendar",
monthDays : new Array(31,28,31,30,31,30,31,31,30,31,30,31),
inIT: function(idName,calId){
/*
可选init，$1 为外部填充p的id,$2 为calendar的id和id前缀
*/
Nino_Calendar.idName = idName;
Nino_Calendar.calId=calId;
},
getMonthsDays:function (year){
/*
获取月份的天数
*/
var date = new Date();
if(arguments.length==0)
var year=date.getFullYear();
var monthDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
if((year%4==0)&&(year%100!=0) || (year%400==0))
{
monthDays[1]=29;
}
Nino_Calendar.monthDays=monthDays;
return monthDays;
},
gettotalDays :function (d,m){
/*
获取总天数
*/
if(arguments.length==0)
{
var d = date.getDate();
var m = date.getMonth();
}
var days =0;
var i=0
for(; i<m; i++)
{
days += Nino_Calendar.monthDays[i];
}
return days+d;
},
setCalDays:function (year,month,day){
/*
设置日历
*/
var date = new Date();
if(arguments.length==0)
var year = date.getFullYear();
if(arguments.length<=1)
var month = date.getMonth()+1;
if(arguments.length<=2)
var day = date.getDate();
if(arguments.length==3){
date = new Date(year,month,day);
}
Nino_Calendar.getMonthsDays(year);
var cal = document.getElementById(Nino_Calendar.idName);
var calBody="<table id='"+Nino_Calendar.calId+"'>";
calBody +="<tr id='"+Nino_Calendar.calId+"_weekname'><td colspan=4 id='"+Nino_Calendar.calId+"_year' >"+year+" 年</td><td colspan=3 id='"+Nino_Calendar.calId+"_month' name='"+day+"' >"+month+" 月</td></tr>";
calBody +="<tr id='"+Nino_Calendar.calId+"_weekname'><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>";
month = month-1;
var PReMonthDays = Nino_Calendar.monthDays[(month==0 ? 11 : month-1)];
var tmp_date = new Date(year,month,1);
preMonthDays=preMonthDays-tmp_date.getDay();
var i=0;
for(var ii=preMonthDays+1; i<tmp_date.getDay(); i++,ii++)
{
if(i%7==0){
calBody +="<tr class='"+Nino_Calendar.calId+"_day_num'>";
}
calBody +="<td class='"+Nino_Calendar.calId+"_nottomonth' >"+ii+"</td>";
if(i%7==6)
{
calBody +="</tr>";
}
}
for(var ii=1; ii<=Nino_Calendar.monthDays[month]; i++,ii++)
{
if(i%7==0){
calBody +="<tr class='"+Nino_Calendar.calId+"_day_num'>";
}
if(ii==day)
{
calBody +="<td class='"+Nino_Calendar.calId+"_today' >"+ii+"</td>";
}else{
calBody +="<td class='"+Nino_Calendar.calId+"_tomonth' >"+ii+"</td>";
}
if(i%7==6)
{
calBody +="</tr>";
}
}
for(var ii=1; i<42; i++,ii++)
{
if(i%7==0){
calBody +="<tr class='"+Nino_Calendar.calId+"_day_num'>";
}
calBody +="<td class='"+Nino_Calendar.calId+"_nottomonth' >"+ii+"</td>";
if(i%7==6)
{
calBody +="</tr>";
}
}
calBody +="<tr><td colspan=7><input id='"+Nino_Calendar.calId+"_year_i' type='text' />年<input id='"+Nino_Calendar.calId+"_month_i' type='text' />月<input id='"+Nino_Calendar.calId+"_day_i' type='text' />日</td></tr><tr><td colspan=7><input id='"+Nino_Calendar.calId+"_b' type='button' value='set' /></td></tr></table>";
cal.innerHTML=calBody;
nino_calendar = document.getElementById(Nino_Calendar.calId);
nino_calendar .addEventListener('click',Nino_Calendar.setHandle);
nino_calendar_b = document.getElementById(Nino_Calendar.calId+"_b");
nino_calendar_b.addEventListener('click',Nino_Calendar.setFromInput);
document.getElementById(""+Nino_Calendar.calId+"_year_i").value=year;
document.getElementById(""+Nino_Calendar.calId+"_month_i").value=month+1;
document.getElementById(""+Nino_Calendar.calId+"_day_i").value=day;
return calBody;
},
yearList:function(star,end){
/*
年份列表
*/
if( document.getElementById(""+Nino_Calendar.calId+"_month_select"))
{
Nino_Calendar.setMonth();
}
var tmp_date = new Date();
if(arguments.length==0)
{
var start =tmp_date.getFullYear()-10;
var end =tmp_date.getFullYear()+10;
}
else if(arguments.length==1)
{
var end =start+10;
}
var Y = document.getElementById(""+Nino_Calendar.calId+"_year");
var y= Y.innerHTML.substring(0,Y.innerHTML.indexOf(' '));
var list = "<select id=/""+Nino_Calendar.calId+"_year_select/">";
for(var i=start; i<end; i++)
{
if(i==y)
list +="<option value='"+i+"' selected=/"selected/" >"+i+"</option>";
else list +="<option value='"+i+"' >"+i+"</option>";
}
list +="</select>";
Y.innerHTML = list;
var YS = document.getElementById(""+Nino_Calendar.calId+"_year_select");
YS.addEventListener('change',Nino_Calendar.setYear);
stopBubble();
},
setYear:function(){
var Y = document.getElementById(""+Nino_Calendar.calId+"_year");
var YS = document.getElementById(""+Nino_Calendar.calId+"_year_select");
Y.innerHTML = YS.value+" 年";
Nino_Calendar.setCal();
},
monthList:function(){
if( document.getElementById(""+Nino_Calendar.calId+"_year_select"))
{
Nino_Calendar.setYear();
}
var M = document.getElementById(""+Nino_Calendar.calId+"_month");
var Y = document.getElementById(""+Nino_Calendar.calId+"_year");
var y= Y.innerHTML.substring(0,Y.innerHTML.indexOf(' '));
var m= M.innerHTML.substring(0,M.innerHTML.indexOf(' '));
Nino_Calendar.getMonthsDays(y);
var list = "<select id=/""+Nino_Calendar.calId+"_month_select/">";
for(var i=1; i<=12; i++)
{
if(i==m){
list +="<option value='"+i+"' selected=/"selected/" >"+i+"</option>";
}
else{
list +="<option value='"+i+"' >"+i+"</option>";
}
}
list +="</select>";
M.innerHTML = list;
var MS = document.getElementById(""+Nino_Calendar.calId+"_month_select");
MS.addEventListener('change',Nino_Calendar.setMonth);
},
setMonth:function(){
var M = document.getElementById(""+Nino_Calendar.calId+"_month");
var MS = document.getElementById(""+Nino_Calendar.calId+"_month_select");
M.innerHTML = parseInt(MS.value)+" 月";
Nino_Calendar.setCal();
},
setDay:function(day){
var M = document.getElementById(""+Nino_Calendar.calId+"_month");
M.setattribute('name',day);
Nino_Calendar.setCal();
},
setHandle:function(){
if((typeof event)=="undefined")
event = arguments[0];
var obj = event.srcElement ? event.srcElement:event.target;
var obj_id = obj.getAttribute('id');
switch(obj_id){
case ""+Nino_Calendar.calId+"_year":
{
Nino_Calendar.yearList();
break;
}
case ""+Nino_Calendar.calId+"_month":
{
Nino_Calendar.monthList();
break;
}
default:
{
if(obj.classname==""+Nino_Calendar.calId+"_nottomonth"){
break;
}
day = obj.innerHTML;
if(parseInt(day)>0&&parseInt(day)<=31)
Nino_Calendar.setDay(day);
break;
}
}
stopBubble();
},
setCal:function(){
var Y = document.getElementById(""+Nino_Calendar.calId+"_year");
var M = document.getElementById(""+Nino_Calendar.calId+"_month");
var yv= Y.innerHTML.substring(0,Y.innerHTML.indexOf(' '));
var mv= M.innerHTML.substring(0,M.innerHTML.indexOf(' '));
var dv= M.getAttribute('name');
Nino_Calendar.setCalDays(yv,mv,dv);
},
setFromInput:function(){
var yv=parseInt(document.getElementById(""+Nino_Calendar.calId+"_year_i").value);
var mv=parseInt(document.getElementById(""+Nino_Calendar.calId+"_month_i").value);
var dv=parseInt(document.getElementById(""+Nino_Calendar.calId+"_day_i").value);
Nino_Calendar.setCalDays(yv,mv,dv);
},
}
Nino_Calendar.init("calendar","nino_calendar");
Nino_Calendar.setCalDays();
</script>
</html>
效果:
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的javascript代码实例教程-JS 日历全部内容，希望文章能够帮你解决javascript代码实例教程-JS 日历所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- 前端学java系列（1）——搭建环境 2019-11-04
- JavaScript教程- JavaScript 语句 2018-11-21
- JavaScript教程- JavaScript 语法 2018-11-20
- JavaScript教程- JavaScript 输出 2018-11-20
- JavaScript教程- JavaScript 用法 2018-11-20
- JavaScript教程- JavaScript 简介 2018-11-20
- 重温java基础 2018-11-20
- 了解JavaScript中的Spread运算符 2018-11-17
- js数组操作常用方法超级完整版本值得收藏 2018-11-16
- 谷歌JavaScript风格指南中值得注意的13点 2018-11-11
- 前端学java系列（1）——搭建环境
- 【myeclipse】——Java 内存溢出（java.lang.OutOfMemoryError）
- dun ru jiang hu
- C语言基础知识补充
- javascript代码实例教程-Dom 学习总结及其实例
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“字面量和对应类型...
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“this指针”
- javascript代码实例教程-javascript中encodeURI和decodeURI方法
- javascript代码实例教程-EXTJs 表单控件
- javascript代码实例教程-Extjs4――实现动态的grid（即实现数据库表数据的显示）
- 前端学java系列（1）——搭建环境
- 【myeclipse】——Java 内存溢出（java.lang.OutOfMemoryError）
- dun ru jiang hu
- C语言基础知识补充
- vue项目优化--服务端渲染优化
- javascript代码实例教程-Dom 学习总结及其实例
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“字面量和对应类型...
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“this指针”
- javascript代码实例教程-javascript中encodeURI和decodeURI方法
- javascript代码实例教程-EXTJs 表单控件