JQuery日历控件
日历控件最后一弹——JQuery实现,换汤不换药。原理一模一样,换了种实现工具。关于日历的终于写完了,接下来研究研究nodejs。嗯,近期就这点事了。
同样还是将input的id设置成calendar就可以使用这个控件了。
<input id="calendar" type="text" />
当然别忘了引用jquery库,必须在引用这个控件之前引用jquery库。
calendar_jquery.js源代码:
// JavaScript Document $(document).ready(function(e) { var days = new Array("日","一","二","三","四","五","六");//星期 var today = new Date();//当天日期,备用 var month_big = new Array("1","3","5","7","8","10","12"); //包含所有大月的数组 var month_small = new Array("4","6","9","11"); //包含所有小月的数组 var separator = "-";//间隔符 var cal_width = ($("#calendar").width() < 150)?150:$("#calendar").width(); var cal_height = $("#calendar").height(); var cal_X = $("#calendar").offset().left; var cal_Y = $("#calendar").offset().top; var pane_height = cal_width/7 - 1; $("#calendar").attr("readOnly","readOnly"); $("#calendar").css("cursor","pointer"); $("#calendar").bind("click",showCalendar); $("#calendar").bind("focusout",hideCalendar); function hideCalendar(){ if($("#cal_body").length > 0){ $("#cal_body").remove(); } } function showCalendar(){ if($("#cal_body").length > 0){ $("#cal_body").remove(); } else{ var cal_body = $("<div></div>"); cal_body.attr("id","cal_body"); cal_body.css("position","absolute"); cal_body.css("z-index",10); cal_body.offset({top:cal_Y + cal_height + 5,left:cal_X}); cal_body.width(cal_width + 1); cal_body.height("auto");//auto cal_body.css("overflow","hidden"); cal_body.css("border","solid 1px #CCC"); cal_body.mouseenter(function(e) { $("#calendar").unbind("focusout"); }); cal_body.mouseleave(function(e) { $("#calendar").focus(); $("#calendar").bind("focusout",hideCalendar); }); $("#calendar").parent().append(cal_body); var line1 = $("<div></div>"); line1.width("100%"); line1.height(pane_height); line1.css("background-color","#0FF"); var btn1 = $("<div></div>"); btn1.width(cal_width/3 - 3); btn1.height(pane_height); btn1.css("line-height",pane_height + "px"); btn1.css("text-align","center"); btn1.text("<"); btn1.css("float","left"); btn1.css("cursor","pointer"); btn1.click(function(e) { if(isValidated()){ var old_year = parseInt($("#input_year").val()); if(old_year > 1960){ var year = old_year - 1; var month = parseInt($("#input_month").val()); var val = year + separator + month + separator + 1; init(val); } } }); line1.append(btn1); var input_year = $("<input />"); input_year.attr("id","input_year"); input_year.width(cal_width/3); input_year.height("70%"); input_year.css("float","left"); input_year.css("text-align","center"); input_year.bind("change",changed); line1.append(input_year); var btn2 = $("<div></div>"); btn2.width(cal_width/3 - 3); btn2.height(pane_height); btn2.css("line-height",pane_height + "px"); btn2.css("text-align","center"); btn2.text(">"); btn2.css("float","left"); btn2.css("cursor","pointer"); btn2.click(function(e) { if(isValidated()){ var old_year = parseInt($("#input_year").val()); if(old_year < 2050){ var year = old_year + 1; var month = parseInt($("#input_month").val()); var val = year + separator + month + separator + 1; init(val); } } }); line1.append(btn2); var line2 = $("<div></div>"); line2.width("100%"); line2.height(pane_height); line2.css("background-color","#0FF"); var btn3 = $("<div></div>"); btn3.width(cal_width/3 - 3); btn3.height(pane_height); btn3.css("line-height",pane_height + "px"); btn3.css("text-align","center"); btn3.text("<"); btn3.css("float","left"); btn3.css("cursor","pointer"); btn3.click(function(e) { if(isValidated()){ var old_month = parseInt($("#input_month").val()); if(old_month > 1){ var year = parseInt($("#input_year").val()); var month = old_month - 1; var val = year + separator + month + separator + 1; init(val); } else { var year = parseInt($("#input_year").val()) - 1; var month = 12; var val = year + separator + month + separator + 1; init(val); } } }); line2.append(btn3); var input_month = $("<input />"); input_month.attr("id","input_month"); input_month.width(cal_width/3); input_month.height("70%"); input_month.css("float","left"); input_month.css("text-align","center"); input_month.bind("change",changed); line2.append(input_month); var btn4 = $("<div></div>"); btn4.width(cal_width/3 - 3); btn4.height(pane_height); btn4.css("line-height",pane_height + "px"); btn4.css("text-align","center"); btn4.text(">"); btn4.css("float","left"); btn4.css("cursor","pointer"); btn4.click(function(e) { if(isValidated()){ var old_month = parseInt($("#input_month").val()); if(old_month < 12){ var year = parseInt($("#input_year").val()); var month = parseInt($("#input_month").val()) + 1; var val = year + separator + month + separator + 1; init(val); } else { var year = parseInt($("#input_year").val()) + 1; var month = 1; var val = year + separator + month + separator + 1; init(val); } } }); line2.append(btn4); cal_body.append(line1); cal_body.append(line2); for(var i=0;i<7;i++){ var pane = $("<div></div>"); pane.addClass("pane"); pane.width(pane_height); pane.height(pane_height); pane.css("line-height",pane_height + "px"); pane.css("float","left"); pane.css("text-align","center"); pane.text(days[i]); cal_body.append(pane); } init($("#calendar").val()); } } function init(val){ clearPane(); var temp_date; var year; var month; var date; if(val == ""){ temp_date = today; $("#calendar").val(today.toFormatString(separator)); } else{ year = val.year(); month = val.month(separator); date = val.date(separator); temp_date = new Date(year,month,date); } year = temp_date.getFullYear(); month = temp_date.getMonth() + 1; date = temp_date.getDate(); temp_date.setDate(1); var start = temp_date.getDay() + 7; var end; if(array_contain(month_big, month)){ end = start + 31; } else if(array_contain(month_small, month)){ end = start + 30; } else{ if(isLeapYear(year)){ end = start + 29; } else{ end = start + 28; } } for(var i = 7; i < start; i++){ var pane = $("<div></div>"); pane.addClass("pane"); pane.width(pane_height); pane.height(pane_height); pane.css("line-height",pane_height + "px"); pane.css("float","left"); pane.css("text-align","center"); $("#cal_body").append(pane); } for(var i = start; i < end; i++){ var pane = $("<div></div>"); pane.addClass("pane"); pane.width(pane_height); pane.height(pane_height); pane.css("line-height",pane_height + "px"); pane.css("float","left"); pane.css("text-align","center"); pane.text(i - start + 1); pane.css("cursor","pointer"); pane.mouseover(function(e) { $(this).css("background-color","#0FF"); }); if(date == (i - start + 1)) pane.css("background-color","#0FF"); else{ pane.mouseleave(function(e) { $(this).css("background-color",""); }); } pane.click(function(){ $("#calendar").val(year + separator + month + separator + $(this).text()); $("#cal_body").remove(); }); $("#cal_body").append(pane); $("#input_year").val(year); $("#input_month").val(month); } } //格式化输出 Date.prototype.toFormatString = function(separator){ var result = this.getFullYear() + separator + (this.getMonth() + 1) + separator + this.getDate(); return result; }; //从格式化字符串中获取年份 String.prototype.year = function(){ var str = this.substring(0,4); return str; }; //从格式化字符串中获取月份 String.prototype.month = function(separator){ var start = this.indexOf(separator) + 1; var end = this.lastIndexOf(separator); return parseInt(this.substring(start, end)) - 1; }; //从格式化字符串中获取日期 String.prototype.date = function(separator){ var start = this.lastIndexOf(separator) + 1; return this.substring(start); }; //判断数组array中是否包含元素obj的函数,包含则返回true,不包含则返回false function array_contain(array, obj){ for (var i = 0; i < array.length; i++){ if (array[i] == obj) return true; } return false; } //判断年份year是否为闰年,是闰年则返回true,否则返回false function isLeapYear(year){ var a = year % 4; var b = year % 100; var c = year % 400; if( ( (a == 0) && (b != 0) ) || (c == 0) ){ return true; } return false; } //清除方格 function clearPane(){ var limit = $(".pane").length; for(var i=7; i < limit; i++){ $(".pane").eq(7).remove(); } } //判断输入是否合法 function isValidated(){ var year = $("#input_year").val(); var month = $("#input_month").val(); if(isNaN(year) || isNaN(month)){ alert("请输入正确的年份/月份"); return false; } else{ if(year%1 != 0 || month%1 != 0){ alert("请输入正确的年份/月份"); return false; } else{ year = parseInt(year); if(year < 1960 || year > 2050){ alert("请输入1960~2050之间的年份!"); return false; } else if(month < 1 || month >12){ alert("请输入正确的月份!"); return false; } else{ return true; } } } } //年份月份发生变化时处理函数 function changed(){ if(isValidated()){ var year = $("#input_year").val(); var month = $("#input_month").val(); var val = year + separator + month + separator + 1; init(val); } } });