jQuery 联动日历实现代码

复制代码 代码如下:

$(function(){
var nowDate = $(".nowDate"), //左边的日历盒子
nextDate = $(".nextDate"), //右边的日历盒子
lstrTd = "", //左日期的行的DOM结构
rstrTd = "", //右日期的行的DOM结构
lrows = 0, //左日期行数
rrows = 0, //右日期行数
iHtmlNow = "", //左边的日历结构
iHtmlNext = "", //右边的日历的结构
nowTitleDateY = "", //左边标题年份
nowTitleDateM = "", //左边显示的月份
nowlastM = "", //左边的翻月显示
nextTitleDateY = "", //右边标题年份
nextTitleDateM = "", //右边显示的月份
nextLastM = "", //右边的翻月显示
creatbtu = true, //只创建一次HTML结构的开关
NumDay = 0, //左边每个月的天数;
rNumDay = 0, //左边每个月的天数;
lfday = 0, //左边当前月份的第一天，是星期几
rfday = 0; //右边当前月份的第一天,是星期几
//创建日期行
function creatTr(l,r){
}
/*创建当前和下一个月的日期和年份
*这里分三种情况，当前月为12月 当前月为11月，当前月为1月
*/
function getTitleDate(){
var odate = new Date();
//如果当前月是12月分，那么右边的月份，就应该是1月份
//如果当前月是11月分，那么右边的月份，就应该是1月份
//如果当前月是1月分，那么左边的月份，就应该是12月份
}
/*获取当前月份的一号，是星期几
*首先设置你创建日期对象的年份，月份，和你需要知道的日期数，把这些设置好之后，再使用getDay()方法，就可以获取你设置日期的，星期数了；
*/
function getfirstD(m1,y1,m2,y2){
}
//根据大小月份取得天数
function getTdDay(m1,y1,m2,y2){
}
//根据传入的年份参数，判断是否是润年，即能够被4整除，但不能被100整除，同时满足时；或者能被400整除；
function isRunYear(y){
}
//创建HMTL结构
function creatHtml(creatbtu){
//根据当前月份的一号是星期几，来生成有几行存放所有日期
}
//将日期插入到对应的TD当中
function insertdate(d,t){
//插入到左边
//插入到边
}
//插入到DOM
function insertHtml(){
}
//从DOM中删除
function delHtml(){
}
//点击确定显示或隐藏日历
$("input[type=button]").toggle(function(){
//加这个判断是防止连续点击确定按钮
if(!nowDate.add(nextDate).is(":animated")&&nowDate.add(nextDate).is(":empty")){
//获得标题上面的年份和月份
getTitleDate();
//获得左和右的月份的天数
getTdDay(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY);
//获得左和右的月份一号是星期几
getfirstD(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY);
//创建HTML结构
creatHtml();
//将结构插入到DOM当中
insertHtml();
//插入日期到左和右的表格TD当中
insertdate(lfday,rfday);
//展开日期
nowDate.add(nextDate).slideDown(200);
}
},function(){
//加这个判断是防止连续点击
if(!nowDate.add(nextDate).is(":animated")){
//收起日历
nowDate.add(nextDate).slideUp(200);
//从DOM中删除日历结构
delHtml();
}
});
})