在頁面開發中，經常遇到需要用戶輸入日期的操作。通常的做法是，提供一個文本框（text）,讓用戶輸入，然后，編寫代碼驗證輸入的數據，檢測其是否是日期類型。這樣比較麻煩，同時，用戶輸入日期的操作也不是很方便，影響用戶體驗。如果使用jQuery UI中的datepicker(日歷)插件，這些問題都可以迎刃而解。該插件調用的<span style="color:#cc66cc;"><strong>語法格式</strong></span>如下：
$(“.selector”).datepicker(options);
其中”.selector”表示DOM元素，一般指文本框，由于該插件的作用是提供日期選擇，因此常與一個文本框綁定，將選擇后的日期顯示在該文本框中，選擇options是一個對象與前面插件中的options一樣，通過改變其參數對應的值，從而實現插件功能的變化，在datepicker插件中，選擇options常用參數如下
1、changeMonth 設置一個布爾值，如果wietrue，則可以在標題處出現一個下拉選擇框，可以選擇月份，默認值為false
2、changeYear 設置一個布爾值，如果為true，則可以在標題處出現一個下拉選擇框，可以選擇年份，默認為false
3、showButtonPanel 設置一個布爾值，如果為true，則在日期的下面顯示一個面板，其中有兩個按鈕；一個為“今天”，另一個按鈕為“關閉”，默認值為false，表示不顯示
4、closeText 設置關閉按鈕上的文字信息，這項設置的前提是，showButtonPanel的值必須為true，否則顯示不了效果
5、dateFormat 設置顯示在文本框（text）中的日期格式，可設置為{dateFormat,'yy-mm-dd'},表示日期的格式為年-月-日，如2012-10-1
6、defaultDate 設置一個默認日期值，如{defaultDate+7}，表示，彈出日期選擇窗口后，默認的日期是在當前日期上加上7天
7、showAnim 設置顯示彈出或隱藏日期選擇窗口的方式。可以設置的方式有，“show”、“sildeDown”、“fadeln”后者“”，表示沒有彈出日期選擇窗口的方式
8、showWeek 設置一個布爾值，如果為true，則可以顯示每天對應的星期，默認值為false
9、yearRange 設置年份的范圍
最近在研究js插件的開發，以前看大神們，對插件都是信手拈來，隨便玩弄，感覺自己要是達到那種水平就好了，就開始自己研究插件開發了。研究了一段時間之后，就開始寫了自己的第一個日歷插件，由于是初學插件開發，代碼的可讀性可能有點差，希望各位大神可以多提點意見，以后維護代碼，讓這個插件更加的完整。
下面就貼出代碼。
首先，給插件來個整體的div容器
<div class="y-total"></div>
本人習慣給容器取class或id名時，加上自己獨特的前綴，這樣，有助于識別自己的代碼，也避免與其他同事的樣式沖突。
然后就是開始寫樣式，可以根據自己的需求來調整樣式
.y-total{height:auto;border:px solid #;} .y-total .return-btn{height:px;} .y-total .return-btn>div{border-right: px solid #;border-bottom: px solid #;color: #;font-family: "Microsoft Yahei",PMingLiU,Verdana,Arial,Helvetica,sans-serif} .y-total .return-btn>div:nth-child(){border-right:px;} .y-total .prev-btn{cursor: pointer;width:%;float: left;text-align: center;} .y-total .time{cursor: pointer;float:left;width:%;text-align: center;} .y-total .next-btn{cursor: pointer;float:right;width:%;text-align: center;} .y-total .y-stop{position: absolute;margin-left: px;background-color: red;color: #fff;} .y-total #datatab{clear:both;width:%;} .y-total #datatab td {height:px;font-family: "Microsoft Yahei",PMingLiU,Verdana,Arial,Helvetica,sans-serif;color: #;border: px solid #DDD;font-size: px;text-align: center;}第三步，就是插件的代碼了
<script> (function($){ var Beautifier = function(vals,options){ this.vals = vals; this.defaults = { "width":"px" } this.p = $.extend({},this.defaults,options); this.$div = $("<div class='return-btn'></div>"); this.prev = $("<div class='prev-btn'>前一頁</div>"); this.time = $("<div class='time'></div>"); this.next = $("<div class='next-btn'>后一頁</div>"); this.tab = $("<table id='datatab'><tr></tr></table>"); } Beautifier.prototype = { getDate : function(){ var vals = this.vals; var t = this.time.attr("class"); var tab = this.tab.attr("id"); this.$div.append(this.prev,this.time,this.next); $(this.p.$this).append(this.$div,this.tab).width(this.p.width); var i = getInfo(vals); $("."+t).text(vals.year+"-" + i[]+"-" + i[]); $(".prev-btn,.next-btn").click(function(){returnAction($(this),t,vals,tab)}); setDateInfo(tab); init(vals,tab); } } /*加載時將日期放入td中*/ function init(vals,tab){ var w = new Date(vals.year+","+vals.month+","+).getDay()//獲取本月第一天是星期幾 var l =(w==?:w-) + new Date(vals.year,vals.month,).getDate();//需要鋪上td的個數 var t = Math.ceil(l/); for(var i=; i<t; i++){ $("#"+tab).append("<tr class='y-tr'></tr>"); } $(".y-tr").each(function(){ for(var i=; i<; i++){ $(this).append("<td></td>"); } }) setvalue(vals,new Date(vals.year,vals.month,).getDate(),w); } function setvalue(val,l,w){ for(var i=;i<l+;i++){ var space = w==?i+-+:i+w-+; $("td").eq(space).text(i); if(i == val.day){ $("td").eq(space).css("color","red"); } } } function getInfo(vals){ var info = []; info.push(vals.month > ? vals.month : "" + vals.month); info.push(vals.day > ? vals.day : "" + vals.day); return info; } function setDateInfo(tab){ var m = ["","一","二","三","四","五","六","日"]; for(var i=; i<; i++){ $("#"+tab).find("tr:eq()").append("<td>星期"+m[i]+"</td>"); } } /*上一頁，下一頁的點擊事件*/ function returnAction($this,t,val,tab){ if($this.attr("class") == "prev-btn"){ if(val.month < ){ val.month =; val.year-=; }else{ val.month-=; } }else if($this.attr("class") == "next-btn"){ if(val.month > ){ val.month =; val.year+=; }else{ val.month+=; } } var v = getInfo(val); $("."+t).text(val.year+"-"+v[]+"-"+v[]); $(".y-tr").remove(); init(val,tab); } $.fn.work = function(options){ var t = new Date(); var DateVal = { "year" : t.getFullYear(), "month" : t.getMonth()+, "day" : t.getDate() } var objs = new Beautifier(DateVal,options); objs.getDate(); } })(jQuery) </script>那么，插件就差不多完成了，現在只需要調用插件的方法就可以了
<script> $(".y-total").work({ "$this" : ".y-total", "width" : "px",//控制容器的寬度 }); </script>效果如圖：
新聞熱點
疑難解答
