通过代码示例学习jQueryUI库DatePicker应用技术(基础篇)

杨教授大学堂 精心创作的优秀程序员 职业提升必读系列资料

前 言

jQuery UI是基于jQuery基础类库API开发的开源的JavaScript 网页UI（用户界面）代码组件库，使用jQuery UI可以实现Web UI界面交互、动画、特效和可更换主题的可视控件，并且还可以定制Web UI的主题风格。从而可以应用它轻松地构建出高度可交互的Web应用程序的UI界面。

随着Web应用的普及及AJAX相关应用的深入，客户端和Web服务器端需要频繁地交互数据，对Web交互的界面也提出了新的要求——简洁、方便、人性化等用户体验度高；同时随着移动设备的普及，客户端的访问设备也逐渐多样化。如何为不同的客户端设备提供统一的Web应用界面，从而提高开发效率和降低开发成本。目前比较好的技术实现手段是应用JQuery及JQuery UI系统库相关的技术。

作者根据自身多年的软件开发实践和经验总结，结合多年的IT职业培训的教学和高校软件学院一线的教学工作体验，在本系列文档中通过具体的程序代码示例为读者介绍jQuery UI中典型的应用组件技术。本文档为jQuery UI datePicker日期组件的应用基础，主要涉及datePicker组件的技术特性、datePicker组件主要的成员属性及应用示例、datePicker组件dialog成员方法、getDate成员方法和option等成员方法的应用示例，体现datePicker组件的技术特性的应用示例等方面的内容。

杨教授大学堂精心创作有系列化的优秀程序员职业提升必读技术资料，这些资料将系统地从软件设计和开发实现的“设计思想”、“管理策略”、“技术实现”和“经验方法”等方面与读者进行充分的交流，涉及作者对软件开发设计思想和原则、课程设计、项目实训、软件实现技术等方面的学习心得体会和应用技巧、经验总结。

杨教授大学堂，版权所有，盗版必究。 1/30页

杨教授大学堂 精心创作的优秀程序员 职业提升必读系列资料

本 文 目 录

1.1 datePicker组件的技术特性 ......................................................................................................... 3

1.1.1

1.1.2

1.1.3

1.1.4

1.1.5

datePicker组件主要的成员属性及应用示例 ...................................................................... 7

datePicker组件dialog成员方法及应用示例 .................................................................... 15

datePicker组件getDate成员方法及应用示例 ................................................................. 19

datePicker组件option成员方法及应用示例 ................................................................... 22

体现datePicker组件的技术特性的应用示例 ................................................................... 29

杨教授大学堂，版权所有，盗版必究。 2/30页

杨教授大学堂 精心创作的优秀程序员 职业提升必读系列资料

1.1 datePicker组件的技术特性

1、在多种平台中都提供有datePicker组件

由于在UI界面开发中，经常需要输入日期和时间等格式的数据，而日期和时间是有一定的格式和语言规范的要求。为了降低程序对用户输入的日期和时间数据检查的复杂性，在多种平台中都提供有datePicker组件。

（1）在iPhone和微软VC中都提供有datePicker组件

如下示图为作者在百度搜索中搜索datePicker组件的结果信息局部截图，在搜索结果中显示在iPhone和微软VC中都提供有datePicker组件。

（2）在的C#和Android系统中也提供有datePicker组件

如下示图为作者在百度搜索中搜索datePicker组件的结果信息局部截图，在搜索结果中显示在的C#和Android系统中也提供有datePicker组件。

2、JQuery UI中提供的datePicker组件主要的功能

（1）主要的功能

jQuery UI datePicker组件是一个高度可定制的插件，可以很方便地为Web页面中的表单内的日期和时间输入框组件提供输入和添加日期选择的功能，并且还可以自定义日期的显示格式以及要使用的语言、限制选择日期范围、添加相关按钮以及其它导航等功能，也还支持使用键盘的快捷键来驱动杨教授大学堂，版权所有，盗版必究。 3/30页

杨教授大学堂 精心创作的优秀程序员 职业提升必读系列资料

datePicker组件。

（2）常用的控制键及对应的功能

jQuery UI datePicker组件不仅支持鼠标点选日期，同时也还可以通过键盘控制选择日期，如下为常用的键盘控制键及对应的功能说明。

1)

2)

3)

4)

5)

6)

7)

pageup/down - 上一个/下一个月

ctrl+pageup/down - 上一年/下一年

ctrl+home- 当前月份

ctrl+up/down- 前一天/后一天

enter- 接受当前选定的日期

ctrl+end- 关闭日期插件的显示，并清除选定的日期

escape- 关闭日期插件，并不会清除已选择的日期

3、jQuery UI的官方网站/datepicker/所提供的示例

在jQuery UI的官方网站/datepicker/中提供有许多典型应用的示例，读者在学习中可以多阅读相关的示例代码以深入地掌握datePicker组件的内部工作机制和应用技巧。

4、技术帮助文档/datepicker/

（1）技术帮助文档

杨教授大学堂，版权所有，盗版必究。 4/30页

杨教授大学堂 精心创作的优秀程序员 职业提升必读系列资料

在技术帮助文档中详细地对datePicker组件组件的主要属性、事件和方法都提供了相关的说明文档，读者在应用datePicker组件时可以随时查看相关的技术帮助文档以解决在应用开发中所遇到的技术问题。

（2）典型的应用示例

JQuery UI不仅提供了详细的技术帮助文档资料，也还提供有典型的应用示例，为读者展示在典型的应用需求下如何应用datePicker组件以及如何满足应用的需要的示例。作者在写本系列文档资料时，也多次参考JQuery UI中所提供的datePicker组件的应用示例，并对其中的一些示例进行了改进和完善。

5、定制datePicker组件内的日期显示的格式及示例

（1）了解datePicker组件内的dataFormat成员属性

该成员属性值为字符串类型，默认为“mm/dd/yy”。下面为格式字符串中的格式字母及含义：

1) d - 每月的第几天（没有前导零）

2) dd - 每月的第几天 （两位数字）

3) - 一年中的第几天 （没有前导零）

4) oo - 一年中的第几天（三位数字）

5) D - day name short

6) DD - day name long

7) m - 月份 （没有前导零)

8) mm - 月份 （两位数字)

9) M - month name short

10) MM - month name long

11) y - 年份（两位数字）

12) yy - 年份（四位数字）

（2）不同的日期显示格式的效果示图

杨教授大学堂，版权所有，盗版必究。 5/30页

杨教授大学堂 精心创作的优秀程序员 职业提升必读系列资料

（3）dataFormat属性的应用代码片段示例

请注意dateFormat中代表年份的字母是“yy”（只有两个yy，而不是4个），而如果写成了“yyyy年mm月dd日”的形式，年份则会显示两遍。上面的代码执行的结果如下图所示：

（4）dataFormat属性的另一个应用示例

从如下的执行结果可以了解到，文本框中日期格式由前面的“yy年mm月dd日”的格式转变成了“yy/mm/dd”的日期格式。当然，在datePicker组件中还有提供有许多别的日期格式，读者可以根据项目的实际应用需要进行选择和设置。

杨教授大学堂，版权所有，盗版必究。 6/30页

杨教授大学堂 精心创作的优秀程序员 职业提升必读系列资料

1.1.1 datePicker组件主要的成员属性及应用示例

datePicker组件包含有许多的成员属性，从而允许开发者在应用中对datePicker组件进行各种形式的定制以满足项目的应用要求。作者在下文中为读者介绍datePicker组件主要的成员属性及相关的应用示例，更多的成员属性的详细了解，建议读者参考datePicker组件的技术帮助文档。

在JQuery UI的datePicker组件的程序中定义有如下的成员属性，每个成员属性都提供有对应的默认属性值。如下图所示，作者在下文中重点介绍典型成员属性及应用示例。

1、appendText成员属性

（1）主要的功能

定义在日期输入框组件的右边显示的日期格式的说明文字，从而使得使用者能够了解输入的日期数据的格式要求。

（2）属性值的数据类型

该成员属性值的数据类型为String，默认值为“”。

杨教授大学堂，版权所有，盗版必究。 7/30页

杨教授大学堂 精心创作的优秀程序员 职业提升必读系列资料

（3）在初始化datePicker组件时设置appendText成员属性值的代码示例

上面的代码示例的执行结果如下图所示：

（4）在初始化datePicker组件后获得和设置appendText成员属性值的代码示例

获得appendText成员属性值的代码示例：

var appendText = $("JQuery选择器" ).datepicker( "option", "appendText" );

设置appendText成员属性值的代码示例：

$("JQuery选择器" ).datepicker( "option", "appendText", "(yyyy-mm-dd)" );

2、autoSize成员属性

（1）主要的功能

该成员属性值为布尔类型，默认值为false。如果设置为true，则将自动地调整日期输入框组件的宽度为dateFormat所定义的日期格式的字符串长度，从而产生紧凑的日期输入框组件。

（2）在初始化datePicker组件时设置autoSize成员属性值的代码示例

上面的代码示例的执行结果如下图所示：杨教授大学堂，版权所有，盗版必究。 8/30页

杨教授大学堂 精心创作的优秀程序员 职业提升必读系列资料

（3）在初始化datePicker组件后获得和设置autoSize成员属性值的代码示例

获得autoSize成员属性值的代码示例：

var autoSize = $("JQuery选择器" ).datepicker( "option", "autoSize" );

设置autoSize成员属性值的代码示例：

$("JQuery选择器" ).datepicker( "option", "autoSize", true);

3、defaultDate成员属性

（1）主要的功能

设置默认加载完后第一次显示时选中的日期值，从而为datePicker组件提供默认的日期值。

（2）属性值的数据类型

该成员属性值可以为Date对象、数字Number或者字符串等多种形式的值，定义当前默认选择的日期值，默认值为空对象null。

如果设置为Date对象，则改变当前默认的日期为指定的Date对象所代表的日期；而如果设置为数字值，则表示以今天为基准的日期——正数代表今天往后（如 +30，则表示从今天开始往后30天），而负数代表今天之前。

（3）在初始化datePicker组件时设置defaultDate成员属性值的代码示例

如下的左图为在datePicker组件中没有定义出defaultDate成员属性（或者defaultDate成员属性值设置为 0）的执行结果示图（日期值为2014年4月10日星期四），而右图为将defaultDate成员属性设置为+30的执行结果示图（日期值为2014年5月10日星期六）。两者之间相差30天，这也就是+30的效果（在2014年4月10日的基础上往后30天）。

杨教授大学堂，版权所有，盗版必究。 9/30页

杨教授大学堂 精心创作的优秀程序员 职业提升必读系列资料

（4）在初始化datePicker组件后获得和设置defaultDate成员属性值的代码示例

获得defaultDate成员属性值的代码示例：

var defaultDate= $("JQuery选择器" ).datepicker( "option", "defaultDate" );

设置defaultDate成员属性值的代码示例：

$("JQuery选择器" ).datepicker( "option", "defaultDate", +30);

4、duration成员属性

（1）主要的功能

定义日期组件在显示时的延迟效果或者具体的时间（毫秒）。

（2）属性值的数据类型

该成员属性值为字符串类型，默认为“normal”。duration成员属性的字符串值可以为“slow”、“normal”和“fast”。

（3）在初始化datePicker组件时设置duration成员属性值的代码示例

杨教授大学堂，版权所有，盗版必究。 10/30页

杨教授大学堂 精心创作的优秀程序员 职业提升必读系列资料

（4）在初始化datePicker组件后获得和设置duration成员属性值的代码示例

获得duration成员属性值的代码示例：

var duration= $("JQuery选择器" ).datepicker( "option", "duration" );

设置duration成员属性值的代码示例：$("JQuery选择器" ).datepicker( "option", "duration", "slow");

5、showButtonPanel成员属性

（1）主要的功能

该成员属性值为布尔类型，默认值为false。如果设置为true，将显示出按钮面板（包含有“今天”和“关闭”按钮）。

（2）在初始化datePicker组件时设置showButtonPanel成员属性值的代码示例

上面的代码示例的执行结果如下，在datePicker组件的下方将出现一个按钮面板，在该面板中包含有默认文字为“今天”和“关闭”的控制按钮。点击“关闭”按钮会关闭datePicker组件的弹出面板。

杨教授大学堂，版权所有，盗版必究。 11/30页

杨教授大学堂 精心创作的优秀程序员 职业提升必读系列资料

但是用户对当前日期（也就是“今天”）那个按钮点击后可能会没反映，并没有选中任何日期。它的作用只有一个，就是当点开了日期控件，并选了其它的月份或者年份后，但是突然又想回到今天的当前日期面板，那么点击这个按钮可以快速切换到当前的日期面板。

（3）定制按钮面板中的各个按钮的提示文字

可以通过设置“closeText”成员属性值以改变“关闭”按钮的默认显示文字，而通过设置“currentText”成员属性值也可以改变“今天”按钮的默认显示文字。如下的代码示例：

请输入日期

6、showAnim成员属性

（1）主要的功能

杨教授大学堂，版权所有，盗版必究。 13/30页

杨教授大学堂 精心创作的优秀程序员 职业提升必读系列资料

主要决定在显示和隐藏DatePicker时的动画形式的名称字符串。可以为如下的名称字符串：

show —— 默认名称、slideDown、fadeIn、blind、bounce、clip、drop、fold、slide、""（不需要动画）。这些动画效果及名称其实示jQuery UI Effect组件所实现的，读者可以参考jQuery UI Effect组件相关的技术文档，作者在后续的文档中也将会详细地介绍jQuery UI Effect组件的应用。下面为jQuery UI

Effect组件中所提供的各个动画效果的名称及功能说明：

1) blind

2) bounce

3) clip

4) drop

从下至上收起来，直到隐藏

上下晃动标签元素

上下同时收起来，直到隐藏

向左边移动并升高透明度，直到隐藏

5) explode 将元素拆分成9宫，向外扩展并升高表明度，直到隐藏

6) fadeIn 通过不透明度的变化来实现所有匹配元素的淡入效果

7) fold 向上收起，再向左收起，直到隐藏

8) highlight 高亮某个元素

9) puff 扩大元素宽度和高度、并升高透明度，直到隐藏

10) pulsate 闪烁标签元素

11) scale 从右下向左上收起，直到隐藏

12) shake 左右晃动（震动）标签元素，而震动的块标签元素不仅可以是图片，

也可以是普通的DOM元素（如

本文标签： 组件 属性 成员 应用