jquery实现日历选择功能

实现如下图所示的日历，：

编写日历的基础思想是先获取当前日期，根据当前月份判断本月天数，然后依次获取其他年份月份数据。

下面是我的HTML代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="reset.css"><link rel="stylesheet" type="text/css" href="calendar.css"></head><body><p class="select-date-box"><input type="text" name="date" class="J_selectDate select-date" /></p><script type="text/javascript" src="jquery-3.2.1.js"></script><script type="text/javascript" src="calendar.js"></script></body>
</html>

注意自行先引用reset.css，下面是我的css代码calendar.css：

.select-date-box {display: inline-block;position: relative;
}
.date-box {display: none;position: absolute;top: 33px;left: 0;width: 406px;height: 240px;font-size: 16px;line-height: 24px !important;border: 1px solid #c1c1c1;background-color: #fff;z-index: 1;
}
li {float: left;width: 58px;text-align: center;list-style: none;
}
.select-date {width: 230px;padding-left: 8px;font-size: 84%;background: url(calendar.png) no-repeat right center;cursor: pointer;
}
.date-box li:nth-child(-n+7) {height: 40px;color: #fff;font-weight: bold;line-height: 40px;background: #1A84ED;
}
.date-box li:nth-child(-n+7) a:link {color: #fff;
}
.date-box li:nth-child(n+8):nth-child(-n+14) {color: #1A84ED;border-bottom: 1px solid #a1a1a1;
}
.date a {color: #1A84ED;
}/*.sure {cursor: pointer;
}*/
.clear {cursor: pointer;
}
.date-today {background-color: #1A84ED !important; }
.daye-today  a:link{color: #fff !important;
}
.date-today-link {color: #fff !important;
}
.date-prev a,.date-next a {color: #c1c1c1;
}

注意自行引用jquery-3.2.1.js，下面是我的calendar.js代码：

var now = new Date(); //当前时间
var year = now.getFullYear();
var month = now.getMonth()+1;
var date = now.getDate();
var weekArray = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var week = weekArray[now.getDay()];
var hour = now.getHours();
var minute = now.getMinutes();var addSelectBox = '';
addSelectBox += '<ul class="date-box"><li class="year-prev"><a href="javascript:;"><</a></li><li class="year"></li><li class="year-next"><a href="javascript:;">></a></li><li class="month-prev"><a href="javascript:;"><</a></li><li class="month"></li><li class="month-next"><a href="javascript:;">></a></li><li class="today"><a href="javascript:;">今天</a></li><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li>';
addSelectBox += '<li class="hour-prev"><a href="javascript:;"><</a></li><li class="hour">18时</li><li class="hour-next"><a href="javascript:;">></a></li><li class="minute-prev"><a href="javascript:;"><</a></li><li class="minute">18分</li><li class="minute-next"><a href="javascript:;">></a></li><li class="clear">清空</li></ul>';
$(".J_selectDate").after(addSelectBox);  //页面添加静态日历框  $(".J_selectDate").on('click',function(e){ //点击input框触发日历框changeDate();stopPropagation(e);$(this).next().show();$(".year").html(year+"年");$(".month").html(month+"月");$(".hour").html(hour+"时");$(".minute").html(minute+"分");
});$(document).bind('click',function(){ //点击页面其他地方日历框隐藏$(".date-box").hide();
});function stopPropagation(e) {     //取消冒泡if(e.stopPropagation) {         e.stopPropagation();} else {e.cancelBubble = true;}
}function changeDate() {        //改变日期$(".date").remove();$(".J_prevDate").remove();$(".J_nextDate").remove();var otherNow = new Date(year,month-1,1);  //更改后的日期var otherNowPrev = new Date(year,month,1);  var otherNowNext = new Date(year,month+1,1);  var otherMonth = otherNow.getMonth();   var otherMonthPrev = otherNowPrev.getMonth();   var otherMonthNext = otherNowNext.getMonth();   if(otherMonth == 1||otherMonth == 3||otherMonth == 5||otherMonth == 7||otherMonth == 8||otherMonth == 10||otherMonth == 12) {  //获取每月的天数otherDay = 31;} else if(otherMonth == 4||otherMonth == 6||otherMonth == 9||otherMonth == 11) {otherDay = 30;} else if(otherMonth == 2) {if(year%400 == 0 || (year%100!=0 && year%4==0)) { //判断闰年otherDay = 29;} else {otherDay = 28;}} if(otherMonthPrev == 1||otherMonthPrev == 3||otherMonthPrev == 5||otherMonthPrev == 7||otherMonthPrev == 8||otherMonthPrev == 10||otherMonthPrev == 12) {otherDayPrev = 31;} else if(otherMonthPrev == 4||otherMonthPrev == 6||otherMonthPrev == 9||otherMonthPrev == 11) {otherDayPrev = 30;} else if(otherMonthPrev == 2) {if(year%400 == 0 || (year%100!=0 && year%4==0)) { //判断闰年otherDayPrev = 29;} else {otherDayPrev = 28;}} if(otherMonthNext == 1||otherMonthNext == 3||otherMonthNext == 5||otherMonthNext == 7||otherMonthNext == 8||otherMonthNext == 10||otherMonthNext == 12) {otherDayNext = 31;} else if(otherMonthNext == 4||otherMonthNext == 6||otherMonthNext == 9||otherMonthNext == 11) {otherDayNext = 30;} else if(otherMonthNext == 2) {if(year%400 == 0 || (year%100!=0 && year%4==0)) { //判断闰年otherDayNext = 29;} else {otherDayNext = 28;}} var otherweek = otherNow.getDay();    //通过获取每月1日星期几判断起始点var otherweekPrev = otherNowPrev.getDay();var otherweekNext = otherNowNext.getDay();var showDate ="";var j=0,n=0;for(var i=0;i<42;i++) {if(i<=otherDay+otherweek-1&&i>=otherweek) {j++;   if(j==date) {showDate += "<li class='date date-today'><a href='javascript:;' class='date-today-link'>"+j+"</a></li>"; //当前日期} else {showDate += "<li class='date'><a href='javascript:;'>"+j+"</a></li>";}} else if(i<otherweek) {p = otherDayPrev+i-otherweek+1;showDate += "<li class='J_prevDate date-prev'><a href='javascript:;'>"+p+"</a></li>";} else {n++;showDate += "<li class='J_nextDate date-next'><a href='javascript:;'>"+n+"</a></li>";}};$(".hour-prev").before(showDate);
}$(".year-prev").on('click',function(e){    //年year--;$(".year").html(year+"年");changeDate();stopPropagation(e);
});
$(".year-next").on('click',function(e){year++;$(".year").html(year+"年");changeDate();stopPropagation(e);
})$(".month-prev").on('click',function(e){  //月if(month>1) {month--;$(".month").html(month+"月");} else {month = 12;year--;$(".month").html(month+"月");$(".year").html(year+"年");}changeDate();stopPropagation(e);
});
$(".month-next").on('click',function(e){if(month<12) {month++;$(".month").html(month+"月");} else {month = 1;year++;$(".month").html(month+"月");$(".year").html(year+"年");}changeDate();stopPropagation(e);
});$(".hour-prev").on('click',function(e){  //时if(hour>0) {hour--;$(".hour").html(hour+"时");} else {hour = 23;$(".hour").html(hour+"时");}stopPropagation(e);
});
$(".hour-next").on('click',function(e){if(hour<23) {hour++;$(".hour").html(hour+"时");} else {hour = 0;$(".hour").html(hour+"时");}stopPropagation(e);
});$(".minute-prev").on('click',function(e){    //分if(minute>0) {minute--;$(".minute").html(minute+"分");} else {minute = 59;$(".minute").html(minute+"分");}stopPropagation(e);
});
$(".minute-next").on('click',function(e){if(minute<59) {minute++;$(".minute").html(minute+"分");} else {minute = 0;$(".minute").html(minute+"分");}stopPropagation(e);
})$(".today").on('click',function(){    //今天now = new Date();year = now.getFullYear();month = now.getMonth()+1;date = now.getDate();hour = now.getHours();minute = now.getMinutes();$(".year").html(year+"年");$(".month").html((month+1)+"月");$(".hour").html(hour+"时");$(".minute").html(minute+"分");changeDate();normalDate();$(this).parent().prev().val(today);
})$(".date-box").on('click','.date',function(){   //日date = $(this).text();normalDate();$(this).parent().prev().val(today);
})
$(".date-box").on('mouseover','.date',function(){$(this).children().css({"color":"#fff","text-decoration":"none"});$(this).css("background-color","#1A84ED");
})
$(".date-box").on('mouseout','.date',function(){$(this).children().css("color","#1A84ED");$(this).css("background-color","#fff");
})$(".date-box").on('click','.J_prevDate',function(e){    //灰色日期date = $(this).text();if(month == 1) {year--;month=12;normalDate();$(this).parent().prev().val(today);} else {month--;normalDate();$(this).parent().prev().val(today);}
})
$(".date-box").on('click','.J_nextDate',function(){date = $(this).text();if(month == 12) {year++;month=1;normalDate();$(this).parent().prev().val(today);} else {month++;normalDate();$(this).parent().prev().val(today);}
})
function normalDate() { //规格化日期if(month<10)  month="0"+month; if(date<10)     date="0"+date; if(hour<10)       hour="0"+hour; if(minute<10) minute="0"+minute;
//  today = year+"年"+month+"月"+date+"日"+hour+"时"+minute+"分";today = year+"-"+month+"-"+date+" "+hour+":"+minute+":00";month = Number(month);date = Number(date);hour = Number(hour);minute = Number(minute);
}// $(".sure").on('click',function(){   //确定
//  $(".date-box").hide();
// })$(".clear").on('click',function(){ //清空$(this).parent().prev().val("");
})

这样一个简单大方的日历就做好了！

jquery实现日历选择功能相关推荐

一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址: http://keleyi.com/a/bjad/e ...
日历签到 mysql_php+mysql+jquery实现日历签到功能的方法
本文主要介绍了php+mysql+jquery实现日历签到功能的过程与步骤,具有很好的参考价值在网站开发过程中我们会经常用到签到功能来奖励用户积分,或者做一些其他活动.这次项目开发过程中做了日历签到 ...
java 日历签到功能_基于jquery实现日历签到功能
使用Jquery实现每日签到功能基于jquery实现日历签到功能 jquery记事日历插件e-calendar 思路:1.获取当月第一天是周几2.获取当月共几天通过获取下月的第0天,即是当月最后一 ...
js php 实现日历签到_基于jquery实现日历签到功能_jquery
在一些任务游戏.贴吧管理中都会有一个签到功能,帮助大家记录登录天数,积累等级经验,这个日历签到功能是如何实现的,本文为大家进行演. 本文实例讲述了基于jquery实现日历签到功能.分享给大家供大家参考 ...
每日签到html特效,jQuery实现日历每日签到网页特效
本文主要和大家分享jQuery实现日历每日签到网页特效,主要以代码的形式和大家分享,希望能帮助到大家. index.html 代码: jQuery简洁的日历签到插件 $(function(){ //a ...
jquery 简单日历
今天试着用jquery 写了一个日历,等有时间研究一下别人写的思路,上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
jquery网页日历显示控件calendar3.1使用详解
关于日历插件,我做了好多次尝试,一直致力于开发一款简单易用的日历控件.我的想法是争取在引用这个控件后,用一行js代码就能做出一个日历,若在加点参数,就能自定义外观和功能丰富多彩的日历.Calendar ...
利用jQuery定制日历（含时分秒时区功能）
出于需要,最近想找一个含时分功能的日历,网上的确有些网友自己用js写的,但是下载下来问题诸多,加之代码说明混乱,所以改起来很麻烦.后来发现有国外网友利用Jquery定制了比较丰富的日历样式,最重要的是 ...
Bootstrap+Jquery的日历效果实现
一.效果图二.代码本案例中用到了Bootstrap和Jquery,除此之外还有其他的ls和css文件. dateTime.css如下: @charset "utf-8"; *{ ...

jquery实现日历选择功能

jquery实现日历选择功能相关推荐

最新文章

热门文章