在前端开发常常遇到需要用到日历的情况，原生的<input type="date">的效果是比较丑的，如果要执行一些绑定的事件就要大费事件。这个时候使用日历插件是一个很好的选择。baidu、google一搜，日历插件大把，我这里分享一下jqueryui下的datepicker组件的使用。
具体使用：
<input type="text" id="datepicker">
<div id="datepicker">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
使用是非常简单的，效果如下：
入门教程结束，那么如果没有特别的需求，实现选择日期就使用一个几十K的的库，其实这不实际。那么，深入的去了解一下jqueryui的datepicker组件吧。
（全局函数）Utility functions
$.datepicker.setDefaults( options ) //全局设置日期选择插件的参数.
$.datepicker.formatDate( format, date, options ) //格式化显示的日期字符串
$.datepicker.iso8601Week( date ) //按照指定格式获取日期字符串
（属性）Option
jqueryUIdatepick有很多非常实用的属性，建议大家先参考一下官方说明
推荐一个博客，里面有很详细的介绍，重点是中文翻译了个属性的用处，估计是很多人的福音
http://www.cnblogs.com/lf6112/archive/2011/05/19/2051126.html
详细介绍几个比较实用的事件:
-
beforeShowDay: function(date){}
在日期完全渲染出来之前，控件上的每一个日期都会执行这个函数，date返回的是当前的日期，当然你可以试一下console.log一下看看效果。函数结束必须返回一个数组：[0]此日期是否可选(true/false)，[1]此日期的CSS样式名称(""表示默认)，[2]当鼠标移至上面出现一段提示的内容。
如：return ["false","today","今天"];
那么在该日期下的日期是不可选的，附加上了today类的css样式，当鼠标移至上面会显示今天。
这是一个非常好用的事件，在页面渲染之前，根据日期判断条件给不同的日期附上不同的样式，下面给个小小效果：
然而，这个属性配合onSelect用是非常好用的，
onSelect(dateText,inst)
当选中日期后会触发该函数，dateText为当前的日期，inst则为当前日期插件的实例根据日期判断条件，给予不同的日期添加不同的操作，实现日历上的操作提供了很大帮助。onClose(dateText,inst)
道理同上，关闭日期控件会触发该函数。
最后，如果自由改变jqueryui datepicker的样式呢，当然尽量不要去修改源码，通过审查元素，找到想要改变节点，找到所对应的类名，在自己项目的样式表中重新添加样式，如：
那么就可以任意改造它的样式了。
