在前端開發(fā)常常遇到需要用到日歷的情況，原生的<input type="date">的效果是比較丑的，如果要執(zhí)行一些綁定的事件就要大費事件。這個時候使用日歷插件是一個很好的選擇。baidu、google一搜，日歷插件大把，我這里分享一下jqueryui下的datepicker組件的使用。

link: http://jqueryui.com/download/

具體使用：

<input type="text" id="datepicker">
<div id="datepicker">
<script>
$(function() {
  $( "#datepicker" ).datepicker();
});
</script>

使用是非常簡單的，效果如下：

入門教程結(jié)束，那么如果沒有特別的需求，實現(xiàn)選擇日期就使用一個幾十K的的庫，其實這不實際。那么，深入的去了解一下jqueryui的datepicker組件吧。

（全局函數(shù)）Utility functions

$.datepicker.setDefaults( options )  //全局設置日期選擇插件的參數(shù).
$.datepicker.formatDate( format, date, options )  //格式化顯示的日期字符串
$.datepicker.iso8601Week( date )  //按照指定格式獲取日期字符串

（屬性）Option
jqueryUIdatepick有很多非常實用的屬性，建議大家先參考一下官方說明

http://api.jqueryui.com/datepicker/

推薦一個博客，里面有很詳細的介紹，重點是中文翻譯了個屬性的用處，估計是很多人的福音

http://www.cnblogs.com/lf6112/archive/2011/05/19/2051126.html

詳細介紹幾個比較實用的事件:

• beforeShowDay: function(date){}
  在日期完全渲染出來之前，控件上的每一個日期都會執(zhí)行這個函數(shù)，date返回的是當前的日期，當然你可以試一下console.log一下看看效果。函數(shù)結(jié)束必須返回一個數(shù)組：[0]此日期是否可選(true/false)，[1]此日期的CSS樣式名稱(""表示默認)，[2]當鼠標移至上面出現(xiàn)一段提示的內(nèi)容。
  如：

  return ["false","today","今天"];

那么在該日期下的日期是不可選的，附加上了today類的css樣式，當鼠標移至上面會顯示今天。
這是一個非常好用的事件，在頁面渲染之前，根據(jù)日期判斷條件給不同的日期附上不同的樣式，下面給個小小效果：

DADD7D05-AC9B-465A-8CBC-788D351D3BAF.png

然而，這個屬性配合onSelect用是非常好用的，

• onSelect(dateText,inst)
  當選中日期后會觸發(fā)該函數(shù)，dateText為當前的日期，inst則為當前日期插件的實例根據(jù)日期判斷條件，給予不同的日期添加不同的操作，實現(xiàn)日歷上的操作提供了很大幫助。

• onClose(dateText,inst)
  道理同上，關閉日期控件會觸發(fā)該函數(shù)。

最后，如果自由改變jqueryui datepicker的樣式呢，當然盡量不要去修改源碼，通過審查元素，找到想要改變節(jié)點，找到所對應的類名，在自己項目的樣式表中重新添加樣式，如：

348E36A3-6285-4616-A400-28D25B04DE69.png

那么就可以任意改造它的樣式了。