日历插件
自己写的有比较常用的三种格式的日历插件：YY-MM,YY-MM-DD,hh-mm。
下载地址
https://github.com/luoxiaowei/DateChoose/tree/master
调用方式：
<input type=''text" onClick="DateChoose({type:'YY-MM'});" /> <input type="text" onClick="DateChoose({type:'hh-mm'});"/> <input type="text" onClick="DateChoose({type:'YY-MM-DD'});"/>
js:
;(function($,w,d){ $.fn.DateChoose = function(option){ event.stopPropagation(); function showTbody(init, year, month,day){ init.$ChooseDtbody.find('td').off('click'); init.$ChooseDtbody.empty(); init.currMonthDate = new Date(year+'-'+month+'-'+1); init.currMonthDateOne = new Date(year,month,0); init.currMonthLength = init.currMonthDateOne.getDate(); var k = 1; for(var tr = 0;tr<6;tr++){ var $tr = $('<tr></tr>').appendTo(init.$ChooseDtbody); for(var td = 0;td<7;td++){ if(tr == 0){ if(td>=init.currMonthDate.getDay()){ k = k >= 1 && k <= 9?"0"+k:k; if(k==day){ $('<td class="active">'+k+'</td>').appendTo($tr); }else{ $('<td>'+k+'</td>').appendTo($tr); } k++; }else{ $('<td></td>').appendTo($tr); } }else{ var tdk=k>init.currMonthLength?'':k; tdk = tdk >= 1 && tdk <= 9?"0"+tdk:tdk; if(tdk==day){ $('<td class="active">'+k+'</td>').appendTo($tr); }else{ $('<td>'+tdk+'</td>').appendTo($tr); } k++; } } } init.$ChooseDtbody.find('td').on('click',function(){ if($(this).text()==''){ return false; } init.$ChooseDtbody.find('td').removeClass('active'); $(this).addClass('active'); el.val(init.$monthCurr.text()+'-'+$(this).text()); init.$box.hide(); }); } function pointerMove(e,Line,Point,Curr,Linelength,LinelengthAvr,_this,i) { console.log(e,Line,Point,Curr,Linelength,LinelengthAvr,_this,i) e.preventDefault(); var x = 0; $(d).bind('mousemove',function(e) { e.preventDefault(); x = e.pageX - Line.offset().left - Point.width()/2; x = x<=0?0:x; x = x>Linelength?Linelength:x; x -= Point.width()/2; $(_this).css('left',x); currDate[i] = parseInt((x+Point.width()/2)/LinelengthAvr)<=9?'0'+parseInt((x+Point.width()/2)/LinelengthAvr):parseInt((x+Point.width()/2)/LinelengthAvr); Curr.text(currDate[i]+':'); i==0?Curr.text(currDate[i]+':'):Curr.text(currDate[i]); }); } var defaults = { type:'YY-MM', $error:$('.ChooseBox-error'), $box:$('.ChooseBox'), $yearbox:$('.Choose-year'), $yearPrev:$('.Choose-year-prev'), $yearNext:$('.Choose-year-next'), $yearCurr:$('.Choose-year-curr'), $monthbox:$('.Choose-month'), $ChooseDbox:$('.Choose-day-box'), $ChooseDbar:$('.Choose-day-bar'), $monthPrev:$('.Choose-month-prev'), $monthCurr:$('.Choose-month-curr'), $monthNext:$('.Choose-month-next'), $ChooseDtablebox:$('.Choose-day-table'), $ChooseDtable:$('.Choose-day-table>table'), $ChooseDtbody:$('.Choose-day-table>table>tbody'), $ChooseYDbox:$('.Choose-yearmonth-box'), $Choosehmbox:$('.ChooseTimeBox'), $currTimebox:$('.Choose-time'), $hoursbox:$('.Choose-hours'), $minutesbox:$('.Choose-minutes'), $btnbox:$('.ChooseTimeBox-btn-box'), $hoursPoint:$('.Choose-hours-point'), $hoursLine:$('.Choose-hours-line'), $hoursCurr:$('.Choose-curr-hours'), $minutesPoint:$('.Choose-minutes-point'), $minutesLine:$('.Choose-minutes-line'), $minutesCurr:$('.Choose-curr-minutes'), $btn:$('.ChooseTimeBox-btn'), $currbtn:$('.ChooseTimeBox-curr-btn'), }; var init = $.extend(defaults,option); var el = $(this), elVal = el.val(), BoxL = el.offset().left, BoxT = el.offset().top + el.height(), date = new Date(), year = date.getFullYear(), month = date.getMonth()+1, day = date.getDate(), hours = date.getHours(), minutes = date.getMinutes(), currDate = []; hours = hours >= 0 && hours <= 9?"0" + hours:hours; minutes = minutes >= 0 && minutes <= 9?"0" + minutes:minutes; month = month >= 1 && month <= 9?"0"+month:month; day = day >= 1 && day <= 9?"0"+day:day; switch (init.type){ case 'YY-MM-DD': init.reg = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/; if(init.reg.test(el.val())){ currDate = elVal?currDate.concat(elVal.split('-')):currDate } currDate.length<=0?currDate.push(year,month,day):currDate; year = currDate[0]; month = currDate[1]; day = currDate[2]; break; case 'hh-mm': init.reg = /^([01]\d|2[01234]):([0-5]\d|60)$/; if(init.reg.test(el.val())){ currDate = elVal?currDate.concat(elVal.split(':')):currDate } currDate.length<=0?currDate.push(hours,minutes):currDate; hours = currDate[0]; minutes = currDate[1]; break; case 'YY-MM': default: init.reg = /^\d{4}-(0[1-9]|1[0-2])$/; if(init.reg.test(el.val())){ currDate = elVal?currDate.concat(elVal.split('-')):currDate } currDate.length<=0?currDate.push(year,month):currDate; year = currDate[0]; month = currDate[1]; break; } init.currday = year+'-'+month+'-'+day; init.currtime = hours +':'+ minutes; init.currMonth = year+'-'+month; if(init.$box.length == 0){ init.$box = $('<div class="ChooseBox"></div>').css({left:BoxL,top:BoxT}).appendTo($('body')); init.$error = $('<span class="ChooseBox-error">格式错误</span>').appendTo(init.$box); init.$ChooseDbox = $('<div class="Choose-day-box"></div>').appendTo(init.$box); init.$ChooseDbar = $('<div class="Choose-day-bar"></div>').appendTo(init.$ChooseDbox); init.$monthPrev = $('<span class="Choose-month-prev"><</span>').appendTo(init.$ChooseDbar); init.$monthCurr = $('<span class="Choose-month-curr">'+init.currMonth+'</span>').appendTo(init.$ChooseDbar); init.$monthNext = $('<span class="Choose-month-next">></span>').appendTo(init.$ChooseDbar); init.$ChooseDtablebox = $('<div class="Choose-day-table"></div>').appendTo(init.$ChooseDbox); init.$ChooseDtable = $('<table><thead><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr></thead></table>').appendTo(init.$ChooseDtablebox); init.$ChooseDtbody = $('<tbody></tbody>').appendTo(init.$ChooseDtable); showTbody(init, year, month, day); init.$ChooseYDbox = $('<div class="Choose-yearmonth-box"></div>').appendTo(init.$box); init.$yearbox = $('<div class="Choose-year"></div>').appendTo(init.$ChooseYDbox); init.$yearPrev = $('<span class="Choose-year-prev"><</span>').appendTo(init.$yearbox); init.$yearCurr = $('<span class="Choose-year-curr">'+currDate[0]+'</span>').appendTo(init.$yearbox); init.$yearNext = $('<span class="Choose-year-next">></span>').appendTo(init.$yearbox); init.$monthbox = $('<ul class="Choose-month"></ul>').appendTo(init.$ChooseYDbox); for(var i = 1;i<=12;i++){ var j = i; j = i<=9?'0'+i:i; $('<li data-month="'+i+'">'+j+'</li>').appendTo(init.$monthbox); } init.$monthbox.children().eq(parseInt(month)-1).addClass('active'); init.$Choosehmbox = $('<div class="ChooseTimeBox"></div>').appendTo(init.$box) init.$currTimebox = $('<div class="Choose-time"><span class="ChooseTimeBox-name">时间：</span></div>').appendTo(init.$Choosehmbox); init.$hoursCurr = $('<span class="Choose-curr-hours">'+init.currtime.split(':')[0]+':</span>').appendTo(init.$currTimebox); init.$minutesCurr = $('<span class="Choose-curr-minutes">'+init.currtime.split(':')[1]+'</span>').appendTo(init.$currTimebox); init.$hoursbox = $('<div class="Choose-hours"><span class="ChooseTimeBox-name">时：</span></div>').appendTo(init.$Choosehmbox); init.$minutesbox = $('<div class="Choose-minutes"><span class="ChooseTimeBox-name">分：</span></div>').appendTo(init.$Choosehmbox); init.$btnbox = $('<div class="ChooseTimeBox-btn-box"></div>').appendTo(init.$Choosehmbox); init.$hoursLine = $('<span class="Choose-hours-line"></span>').appendTo(init.$hoursbox); init.$minutesLine = $('<span class="Choose-minutes-line"></span>').appendTo(init.$minutesbox); init.$hoursPoint = $('<span class="Choose-hours-point"></span>').appendTo(init.$hoursLine); init.$minutesPoint = $('<span class="Choose-minutes-point"></span>').appendTo(init.$minutesLine); init.$currbtn = $('<button class="ChooseTimeBox-curr-btn">当前时间</button>').appendTo(init.$btnbox); init.$btn = $('<button class="ChooseTimeBox-btn">确定</button>').appendTo(init.$btnbox); init.$box.on('click',function(e){ e.stopPropagation(); }); init.$yearPrev.on('click',function(){ init.$yearCurr.text(parseInt(init.$yearCurr.text())-1) }); init.$yearNext.on('click',function(){ init.$yearCurr.text(parseInt(init.$yearCurr.text())+1) }); init.hoursLinelength = init.$hoursLine.width(); init.hoursLinelengthAvr = init.hoursLinelength/23; init.minutesLinelength = init.$minutesLine.width(); init.minutesLinelengthAvr = init.minutesLinelength/59; init.$hoursPoint.on('mousedown',function(e){ pointerMove(e, init.$hoursLine, init.$hoursPoint, init.$hoursCurr, init.hoursLinelength, init.hoursLinelengthAvr, this, 0) }); init.$minutesPoint.on('mousedown',function(e){ pointerMove(e, init.$minutesLine, init.$minutesPoint, init.$minutesCurr, init.minutesLinelength, init.minutesLinelengthAvr, this, 1) }); $(d).on('mouseup',function(){ $(d).unbind('mousemove'); }); init.$currbtn.on('click',function(){ currDate[0] = new Date().getHours()>= 0 && new Date().getHours() <= 9?"0" + new Date().getHours():new Date().getHours(); currDate[1] = new Date().getMinutes()>= 0 && new Date().getMinutes() <= 9?"0" + new Date().getMinutes():new Date().getMinutes(); init.$hoursPoint.css('left',init.hoursLinelengthAvr*parseInt(currDate[0])-init.$hoursPoint.width()/2); init.$minutesPoint.css('left',init.minutesLinelengthAvr*parseInt(currDate[1])-init.$minutesPoint.width()/2); init.$hoursCurr.text(currDate[0]+':'); init.$minutesCurr.text(currDate[1]); }); }else{ init.$box.show().css({left:BoxL,top:BoxT}); switch (init.type){ case 'hh-mm': init.$hoursCurr.text(currDate[0]+':'); init.$minutesCurr.text(currDate[1]); init.hoursLinelength = init.$hoursLine.width(); init.hoursLinelengthAvr = init.hoursLinelength/23; init.minutesLinelength = init.$minutesLine.width(); init.minutesLinelengthAvr = init.minutesLinelength/59; init.$box.show().css({left:BoxL,top:BoxT}); init.$btn.off('click'); break; case 'YY-MM-DD': init.$monthPrev.off('click'); init.$monthNext.off('click'); init.$monthCurr.off('click'); init.$monthCurr.text(init.currMonth); showTbody(init, year, month, day); case 'YY-MM': init.$monthbox.children().removeClass('active').eq(parseInt(currDate[1])-1).addClass('active'); init.$monthbox.children().off('click'); init.$yearCurr.text(currDate[0]); break; default: break; } $(d).off('click'); } switch (init.type){ case 'YY-MM-DD': init.$ChooseDbox.show(); init.$ChooseYDbox.hide(); init.$Choosehmbox.hide(); init.$monthbox.children().on('click',function(){ init.$monthbox.children().removeClass('active'); $(this).addClass('active'); year = init.$yearCurr.text(); month = $(this).text(); init.$ChooseYDbox.hide(); init.$ChooseDbox.show(); init.$monthCurr.text(year+'-'+month); showTbody(init, year, month); }); init.$monthPrev.on('click',function(){ var mC = init.$monthCurr.text().split('-'); mC[1] = parseInt(mC[1])-1; if(parseInt(mC[1])<1){ mC[0] = parseInt(mC[0]) - 1; mC[1] = 12; } mC[1] = mC[1]>=1&&mC[1]<=9?'0'+mC[1]:mC[1]; init.$monthCurr.text(mC[0]+'-'+mC[1]); showTbody(init, mC[0], mC[1],day); }); init.$monthNext.on('click',function(){ var mC = init.$monthCurr.text().split('-'); mC[1] = parseInt(mC[1])+1; if(parseInt(mC[1])>12){ mC[0] = parseInt(mC[0]) + 1; mC[1] = 1; } mC[1] = mC[1]>=1&&mC[1]<=9?'0'+mC[1]:mC[1]; init.$monthCurr.text(mC[0]+'-'+mC[1]); showTbody(init, mC[0], mC[1],day); }); init.$monthCurr.on('click',function(){ var mC = init.$monthCurr.text().split('-'); month = mC[1]; year = mC[0]; init.$yearCurr.text(year); init.$monthbox.children().removeClass('active').eq(parseInt(month)-1).addClass('active'); init.$ChooseDbox.hide(); init.$ChooseYDbox.show(); }) break; case 'hh-mm': init.$ChooseDbox.hide(); init.$ChooseYDbox.hide(); init.$Choosehmbox.show(); init.$hoursPoint.css('left',init.hoursLinelengthAvr*parseInt(currDate[0])-init.$hoursPoint.width()/2); init.$minutesPoint.css('left',init.minutesLinelengthAvr*parseInt(currDate[1])-init.$minutesPoint.width()/2); init.$btn.on('click',function(){ $(this).addClass('active'); el.val(init.$hoursCurr.text()+init.$minutesCurr.text()); init.$box.hide(); }); break; case 'YY-MM': default: init.$ChooseDbox.hide(); init.$ChooseYDbox.show(); init.$Choosehmbox.hide(); init.$monthbox.children().on('click',function(){ init.$monthbox.children().removeClass('active'); $(this).addClass('active'); el.val(init.$yearCurr.text()+ '-' +init.$monthbox.children('.active').text()); init.$box.hide(); }); break; } $(d).on('click',function(){ if(el.val() == '' || init.reg.test(el.val())){ clearTimeout(this.timer); init.$box.hide(); }else{ init.$error.show(); this.timer = setTimeout(function(){ init.$error.hide(); },500) } }); console.log(init) return init; }; })(jQuery,window,document); function DateChoose(option){ $(event.target).DateChoose(option); }
css:
.ChooseBox{ position:absolute; } .ChooseTimeBox{ position:absolute; width:300px; height:140px; border:1px solid #eee; background:#eee; font: 16px/20px 'Microsoft YaHei'; } .Choose-yearmonth-box,.Choose-day-box{ width:200px; height:200px; background:#eee; text-align: center; border:1px solid #eee; } .Choose-yearmonth-box{ font: 16px/50px 'Microsoft YaHei'; } .ChooseBox .Choose-day-box{ font: 16px/18px 'Microsoft YaHei'; } .ChooseBox .ChooseBox-error,.ChooseTimeBox .ChooseTimeBox-error{ position:absolute; top:50%; left:50%; margin-left:-50px; width:100px; height:34px; background:#fff; color:#e5613c; text-align: center; line-height:34px; display: none; } .ChooseBox .Choose-year .Choose-year-prev,.ChooseBox .Choose-year .Choose-year-next,.ChooseBox .Choose-month-prev,.ChooseBox .Choose-month-next{ float:left; width:50px; font:700 18px/50px 'SimSun'; cursor: pointer; } .ChooseBox .Choose-month-prev,.ChooseBox .Choose-month-next{ line-height:30px; } .ChooseBox .Choose-year .Choose-year-curr, .ChooseBox .Choose-month-curr{ float:left; width:100px; } .ChooseBox .Choose-month:after,.ChooseBox .Choose-year:after,.ChooseTimeBox .Choose-hours:after,.ChooseTimeBox .Choose-time:after,.ChooseTimeBox .Choose-minutes:after{ content: ''; display: block; clear: both; } .ChooseBox .Choose-yearmonth-box .Choose-year{ height:50px; width:100%; background:#e5613c; } .ChooseBox .Choose-yearmonth-box .Choose-month-curr{ cursor: pointer; } .ChooseBox .Choose-yearmonth-box .Choose-month{ height:150px; } .ChooseBox .Choose-yearmonth-box .Choose-month li{ list-style: none; height:50px; width:50px; float: left; cursor: pointer; } .ChooseBox .Choose-yearmonth-box .Choose-month li.active{ border-radius: 25px; background:#e5613c; } .ChooseTimeBox .Choose-time{ text-align:center; height:20px; } .ChooseTimeBox .Choose-hours,.ChooseTimeBox .Choose-minutes{ position:relative; height:40px; line-height:40px; } .ChooseTimeBox .ChooseTimeBox-name{ float: left; width:60px; text-align:right; } .ChooseTimeBox .Choose-minutes-line,.ChooseTimeBox .Choose-hours-line{ position:absolute; left:60px; top:18px; width:180px; height:4px; border:1px solid #e5613c; } .ChooseTimeBox .Choose-minutes-point,.ChooseTimeBox .Choose-hours-point{ position:absolute; left:-5px; top:-3px; height:10px; width:10px; background: #e5613c; border:1px solid #e5613c; cursor: pointer; } .ChooseTimeBox .ChooseTimeBox-btn,.ChooseTimeBox-curr-btn{ height:30px; margin:0 40px; padding:0 10px; } .ChooseBox .Choose-day-box .Choose-day-bar{ height:30px; width:100%; background:#e5613c; line-height:30px; } .ChooseBox .Choose-day-box .Choose-day-table{ height:170px; line-height:20px; } .ChooseBox .Choose-day-box .Choose-day-table table{ width:100%; table-layout: fixed; } .ChooseBox .Choose-day-box .Choose-day-table table td{ cursor: pointer; border-radius: 20px; } .ChooseBox .Choose-day-box .Choose-day-table table td.active{ background: #e5613c; }
