jquery实现日历选择功能

来源：互联网发布：网络新技术有哪些方面编辑：程序博客网时间：2024/05/22 07:05

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

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

下面是我的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("");})

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

阅读全文

1 0