在前端開(kāi)發(fā)常常遇到需要用到日歷的情況蔗候，原生的<input type="date">的效果是比較丑的，如果要執(zhí)行一些綁定的事件就要大費(fèi)事件砰嘁。這個(gè)時(shí)候使用日歷插件是一個(gè)很好的選擇。baidu勘究、google一搜矮湘，日歷插件大把，我這里分享一下jqueryui下的datepicker組件的使用口糕。
具體使用：
<input type="text" id="datepicker">
<div id="datepicker">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
使用是非常簡(jiǎn)單的缅阳，效果如下：
入門教程結(jié)束，那么如果沒(méi)有特別的需求景描，實(shí)現(xiàn)選擇日期就使用一個(gè)幾十K的的庫(kù)十办，其實(shí)這不實(shí)際。那么超棺，深入的去了解一下jqueryui的datepicker組件吧向族。
（全局函數(shù)）Utility functions
$.datepicker.setDefaults( options ) //全局設(shè)置日期選擇插件的參數(shù).
$.datepicker.formatDate( format, date, options ) //格式化顯示的日期字符串
$.datepicker.iso8601Week( date ) //按照指定格式獲取日期字符串
（屬性）Option
jqueryUIdatepick有很多非常實(shí)用的屬性，建議大家先參考一下官方說(shuō)明
推薦一個(gè)博客棠绘，里面有很詳細(xì)的介紹件相，重點(diǎn)是中文翻譯了個(gè)屬性的用處，估計(jì)是很多人的福音
http://www.cnblogs.com/lf6112/archive/2011/05/19/2051126.html
詳細(xì)介紹幾個(gè)比較實(shí)用的事件:
-
beforeShowDay: function(date){}
在日期完全渲染出來(lái)之前氧苍，控件上的每一個(gè)日期都會(huì)執(zhí)行這個(gè)函數(shù)夜矗，date返回的是當(dāng)前的日期，當(dāng)然你可以試一下console.log一下看看效果让虐。函數(shù)結(jié)束必須返回一個(gè)數(shù)組：[0]此日期是否可選(true/false)侯养，[1]此日期的CSS樣式名稱(""表示默認(rèn))，[2]當(dāng)鼠標(biāo)移至上面出現(xiàn)一段提示的內(nèi)容澄干。
如：return ["false","today","今天"];
那么在該日期下的日期是不可選的逛揩，附加上了today類的css樣式，當(dāng)鼠標(biāo)移至上面會(huì)顯示今天麸俘。
這是一個(gè)非常好用的事件辩稽，在頁(yè)面渲染之前，根據(jù)日期判斷條件給不同的日期附上不同的樣式从媚，下面給個(gè)小小效果：
然而逞泄，這個(gè)屬性配合onSelect用是非常好用的，
onSelect(dateText,inst)
當(dāng)選中日期后會(huì)觸發(fā)該函數(shù)，dateText為當(dāng)前的日期喷众，inst則為當(dāng)前日期插件的實(shí)例根據(jù)日期判斷條件各谚，給予不同的日期添加不同的操作，實(shí)現(xiàn)日歷上的操作提供了很大幫助到千。onClose(dateText,inst)
道理同上昌渤，關(guān)閉日期控件會(huì)觸發(fā)該函數(shù)。
最后憔四，如果自由改變jqueryui datepicker的樣式呢膀息，當(dāng)然盡量不要去修改源碼，通過(guò)審查元素了赵，找到想要改變節(jié)點(diǎn)潜支，找到所對(duì)應(yīng)的類名，在自己項(xiàng)目的樣式表中重新添加樣式柿汛，如：
那么就可以任意改造它的樣式了冗酿。
