datepicker——基于jquery UI的日期选择器

因项目需要实现一个日期选择器，网上有很多现成的基于jquery的实现，但是找了半天，发现这一篇说的还比较清楚，故转载收藏，感谢原作者。

原文链接：http://ifxoxo.com/jquery-ui-datepicker.html

更多关于jquery UI的信息可参考 ： http://www.w3cschool.cc/jqueryui/jqueryui-tutorial.html

1、示例代码

1 2 3 4 5 6 7 8 9

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

2、效果

二、具体用法

1、需要加载文件

(1)jquery.js
(2)jquery.ui
(3)jquery.ui的css

1 2 3 4 5 6 7

<script type = "text/javascript" src = "http://code.jquery.com/jquery-1.9.1.js" > </script> <script type = "text/javascript" src = "http://code.jquery.com/ui/1.10.3/jquery-ui.js" > </script> < link href = "http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"        rel = "stylesheet" / >

2、页面上的HTML代码

需要一个用来加载datepicker控件的输入框

1 2 3 4

< input id = "date" type = "text" / >

3、js代码

最简单的初始化函数：

1 2 3 4

$ ( . selecter ) . datepicker ( )

4、datepicker()的参数

datepicker非常强大，所以也提供了很多使用的参数，先看一个复杂一点的例子，然后再介绍参数。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<script type = "text/javascript" >      $ ( function ( ) {          $ ( "#datepicker" ) . datepicker ( {          changeMonth: true ,    //月份下拉列表          changeYear: true ,    //月份下拉列表          minDate: "-5d" ,    //可选最小日期          maxDate: "+10d" ,    //可选最大日期          showOn: "both" ,        //点击图片和输入框都弹出面板          buttonImage: "calendar.gif" ,          buttonImageOnly: true ,          showButtonPanel: true , //显示面板底部按钮          closeTextType: "close" , //关闭按钮文字          currentText: "today" ,    //返回今天按钮文字          dateFormat: "yy-mm-dd" ,          dayNamesMin: [ 'Sun' , 'Mo' , 'Tu' , 'We' , 'Th' , 'Fr' , 'Sa' ]，          beforeShow: function ( event , ui ) { //打开窗口之前            alert ( 'this is from ifxoxo.com' ) ;          } //其他参数详见下面      } ) ;      } ) ; </script>

效果如下(灰色部分表示不能选择)

jquery-ui-datepicker 一个复杂的例子–ifxoxo.com

因为参数较多，把所有参数根据功能分成几组进行阐述

(1)、动画

duration	‘normal’	设置日期控件展开动画的显示时间，可选是 “slow”, “normal”, “fast”，”代表立刻，数字代表毫秒数。
showAnim	‘show’	设置显示、隐藏日期插件的动画的名称。
showOptions	{}	如果使用showAnim来显示动画效果的话，可以通过此参数来增加一些附加的参数设置。

(2)、图片按钮

buttonImage	“”	设置弹出按钮的图片，如果非空，则按钮的文本将成为alt属性，不直接显示。
buttonImageOnly	false	是否把按钮安全显示成图片的样子
buttonText	“…”	设置触发按钮的文本内容。
showOn	‘focus’	设置什么事件触发显示日期插件的面板，可选值： focus, button, both(当为focus时，不显示图片按钮)

(3)、选中之后时间格式

dateFormat	mm/dd/yy	设置日期字符串的显示格式。
dayNames	['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']	设置一星期中每天的名称，从星期天开始。此内容用于dateFormat时显示，以及日历中当鼠标移至行头时显示。
dayNamesMin	['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']	设置一星期中每天的缩语，从星期天开始，此内容用于dateFormat时显示，以前日历中的行头显示
dayNamesShort	['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']	设置一星期中每天的缩语，从星期天开始，
navigationAsDateFormat	false	如果设置为true，则formatDate函数将应用到 prevText,nextText和currentText的值中显示，例如显示为月份名称。
constrainInput	true	如果设置为true，则约束当前输入的日期格式。

(4)、面板底部的按钮控制

showButtonPanel	false	设置是否在面板上显示相关的按钮
closeTextType	“done”	设置关闭按钮的文本内容
currentText	“today”	设置当天按钮的文本内容
gotoCurrent	false	如果设置为true，则点击当天按钮时， 将移至当前已选中的日期，而不是今天

(5)、可选中的时间范围

maxDate	false	设置一个最大的可选日期。可以是Date对象， 或者是数字（从今天算起，例如+7）， 或者有效的字符串(‘y’代表年, ‘m’代表月, ‘w’代表周, ‘d’代表日, 例如：’+1m +7d’)。
minDate	false	设置一个最小的可选日期。可以是Date对象， 或者是数字（从今天算起，例如+7）， 或者有效的字符串(‘y’代表年, ‘m’代表月, ‘w’代表周, ‘d’代表日, 例如：’+1m +7d’)。
yearRange	-10:+10	控制年份的下拉列表中显示的年份数量，可以是 (-nn:+nn)，也可以是绝对值 (-nnnn:+nnnn)
shortYearCutoff	‘+10′	设置截止年份的值。 如果是（0-99）的数字则以当前年份开始算起， 当超过截止年份时，则被认为是上个世纪

(6)、面板中上一月 下一月按钮控制

hideIfNoPrevNext	false	设置当没有上一个/下一个可选择的情况下， 隐藏掉相应的按钮。（默认为不可用）
nextText	‘Next’	设置“下个月”链接的显示文字
prevText	‘Prev’	设置“上个月”链接的显示文字。
stepMonths	1	当点击上/下一月时，一次翻几个月。

(7)、面板其他显示参数

firstDay	0	设置一周中的第一天。星期天为0，星期一为1，以此类推。
defaultDate	null	设置默认加载完后第一次显示时选中的日期。 可以是Date对象， 或者是数字（从今天算起，例如+7）， 或者有效的字符串(‘y’代表年, ‘m’代表月, ‘w’代表周, ‘d’代表日, 例如：’+1m +7d’)。
changeMonth	false	设置允许通过下拉框列表选取月份。
changeYear	false	设置允许通过下拉框列表选取年份。
monthNames	['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']	设置所有月份的名称
monthNamesShort	['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']	设置所有月份的缩写。 (具体展现在下拉列表changeMonth)
numberOfMonths	1	设置一次要显示多少个月份。 如果为整数则是显示月份的数量， 如果是数组[2, 3]，则是显示的行与列的数量。
showCurrentAtPos	0	设置当多月份显示的情况下，当前月份显示的位置。自顶部/左边开始第x位。
showMonthAfterYear	false	是否在面板的头部年份后面显示月份。
showOtherMonths	false	是否在当前面板显示上、下两个月的一些日期数（不可选）。
isRTL	false	如果设置为true，则所有文字是从右自左。
appendText	null	在日期插件的所属域后面添加指定的字符串

(8)、同步显示到其他input

altField	null	将选择的日期同步到另一个input中， 配合altFormat可以显示不同格式的日期字符串。
altFormat	”	当设置了altField的情况下，显示在另一个input中的日期格式。

5、datepicker的方法和事件

（1）create 加载的时候此事件将被触发function(event, ui)
（2）beforeShow 展示之前此事件将被触发 function(event, ui)
（3）beforeShowDay 展示日期之前事件将被触发 function(date)
（4）onChangeMonthYear 月份或者年份的时候此事件将被触发function(year, month, ui)
（5）onClose 关闭的时候此事件将被触发 function(dateText, ui)
（6）onSelect 选中的时候此事件将被触发function(dateText, ui)

1 2 3 4 5 6

$ ( '.selector' ) . datepicker ( { beforeShow : function ( event , ui ) { alert4 'has create!!' ) ; } } ) ;

6、方法

(1)destory 销毁 .datepicker( “destroy” )
(2)disable 不可用 .datepicker( “disable” )
(3)enable 可用 .datepicker( “enable” )
(4)option 获取参数 .datepicker( “option”, optionName )
(5)option 设置参数 .datepicker( “option” , optionName , [value] )
(6)widget 返回这个element .datepicker( “widget” )
(7)getDate 获取date .datepicker( “date” )
(8)setDate 设置date .datepicker( “setDate”, date )

1 2 3 4 5

//设置日期 $ ( ".selector" ) . datepicker ( "setDate" , '+1m +7d' ) ;