基于JqueryUI框架的datepicker的应用

在前端开发常常遇到需要用到日历的情况，原生的的效果是比较丑的，如果要执行一些绑定的事件就要大费事件。这个时候使用日历插件是一个很好的选择。baidu、google一搜，日历插件大把，我这里分享一下jqueryui下的datepicker组件的使用。

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

具体使用：

使用是非常简单的，效果如下：

入门教程结束，那么如果没有特别的需求，实现选择日期就使用一个几十K的的库，其实这不实际。那么，深入的去了解一下jqueryui的datepicker组件吧。

（全局函数）Utility functions

$.datepicker.setDefaults( options )  //全局设置日期选择插件的参数.
$.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){}
  在日期完全渲染出来之前，控件上的每一个日期都会执行这个函数，date返回的是当前的日期，当然你可以试一下console.log一下看看效果。函数结束必须返回一个数组：[0]此日期是否可选(true/false)，[1]此日期的CSS样式名称(""表示默认)，[2]当鼠标移至上面出现一段提示的内容。
  如：

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

那么在该日期下的日期是不可选的，附加上了today类的css样式，当鼠标移至上面会显示今天。
这是一个非常好用的事件，在页面渲染之前，根据日期判断条件给不同的日期附上不同的样式，下面给个小小效果：

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

然而，这个属性配合onSelect用是非常好用的，

• onSelect(dateText,inst)
  当选中日期后会触发该函数，dateText为当前的日期，inst则为当前日期插件的实例根据日期判断条件，给予不同的日期添加不同的操作，实现日历上的操作提供了很大帮助。

• onClose(dateText,inst)
  道理同上，关闭日期控件会触发该函数。

最后，如果自由改变jqueryui datepicker的样式呢，当然尽量不要去修改源码，通过审查元素，找到想要改变节点，找到所对应的类名，在自己项目的样式表中重新添加样式，如：

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

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