jQueryUI Datepicker是一个高度可定制的插件，可以很方便的为你的页面添加日期选择功能，你可以自定义日期的显示格式

以及要使用的语言。

你可以使用键盘的快捷键来驱动datepicker插件：

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

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

ctrl+home- 当前月份

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

enter- 接受当前选定的日期

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

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

以上是jQuery官方文档中给出的关于datepicker描述中的一段内容翻译。

datepicker组件的使用是比较简单的，在使用时首先要将jQuery的js文件引入：

<linkrel="stylesheet" type="text/css"href="css/base/jquery.ui.all.css" />

<scripttype="text/javascript" src="js/jquery-1.4.4.min.js"></script>

<scripttype="text/javascript"src="js/jquery-ui-1.8.7.custom.min.js"></script>

<linkrel="stylesheet" type="text/css" href="demos.css"/>

注意引入文件的顺序，一定要先引入jquery.min.js，然后再引入jquery-ui.min.js，否则会报错

<script>

$(document).ready(function() {

$("#datepicker").datepicker();

});

</script>

</head>

<body>

<input type="text"id="datepicker">

</input>

</body>

此时打开页面，点击页面中的input标签，就会弹出日期选择的控件了。如图所示：

仅仅一行js代码就完成了datepicker组件的使用，当页面中的input元素得到焦点时就会弹出日期插件了。

但是，此时弹出的日期控件一切都是按照默认的设置显示的，比如语言，我们点击div，在弹出的日历插件

中可以看到日期的月份，年，星期都是英文的显示，所以为了方便使用，我们需要做一些本地化的操作。

jquery同样为我们提供了一些本地化的js文件，这些文件在ui文件夹里的i18n文件夹下，这里我们选择

简体中文的本地化文件:jquery.ui.datepicker-zh-CN.js，将此文件引入再次点击input，就可以看到我们

熟悉的中文了。

<scripttype="text/javascript" src="ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>

如图：

在引入了显示中文的js文件后，我们会发现日期的显示格式发生了变化，由原来默认的yyyy/mm/dd的格式

转变成了yyyy-mm-dd，那么如果我们使用中文后依然想使用形如：yyyy/mm/dd的显示格式，或者其他自定义的

显示格式时该如何操作？使用dataFormat属性就可以了，

$("#datepicker").datepicker({

dateFormat:'yy/mm/dd'

});

效果如图：

请注意dateFormat的值是：yy/mm/dd，只有两个yy，而不是4个，如果写成了yyyy/mm/dd，那么年份会显示两遍。

现在一个日期选择控件的基本功能就已经都实现了，可以选择日期，可以定制显示格式和语言。

接下来让我们来更深入的了解一些其他的功能，以满足项目中不同的需求。

首先来说日期选择的限定，比如我们让用户只能指定范围的日期，超出这个范围的都不允许选择，

例如我们限定用户只能选择当前日期的前10天和后10天之内的日期，其他时间都不允许选择，可以这样来操作：

$("#datepicker").datepicker({

minDate: -10,

maxDate: "+1W +3"

});

效果如图：

大家可以看到，我写文档的当天是11月20号，向前的日期只能选择到11月10日，而11月10日以前的日期灰显了，不能选择。

在上面的代码中使用minDate来限定用户所能选择的最小的日期，-10表示以当前日期减10天，比如今天19日，那么

用户所能选择的最小日期就是9日，也就是以当前日期向前推10天。10天以前的将不允许选择了。

而maxDate我们使用了"+1W +3"这样的表达式，这个表达式的意思是：从当前日期开始算，用户可以选择的最大日期

为：当前日期+10天，和那个minDate中的-10差不多，只不过一个前推10天，一个后推10天而已。只是两种限定使用

的表达方式不一样，在第二种方式中，+代表从当前日期向后推指定天数，1W,代表一个星期，也就是7天，+3表示后推

3天，我们将设当前日期为19日，那么maxDate的限定就是：由当前日期向后推一个星期(7天)，再后推3天，加起来就是

10天了。所以这个表达式也可以使用+10来替代。效果完全一样。但是第二种表达式有其特有的优势，就是不用花时间去

计算要后推的天数，除了在上述表达式中用的W代表星期之外，还有其他的一些字母分别代表不同的含义：

比如M代表月，D代表天，Y代表年，

如果我们要限定的maxDate为从当前日期向后推一年半，如果使用数字直接指定，首先要算一年有多少天，然后还要算第二年

的半年有多少天，很是麻烦。

使用第二种方式我们就可以如下指定：

maxDate:"+1Y+6M",这就是表示后推1年零6个月。

同时我们还可以使用按钮控件来帮助用户选择日期，形式如下：

$("#datepicker" ).datepicker({

showButtonPanel: true

});

显示效果如下：

这样就会在日期控件底部显示两个按钮，一个当前日期，一个完成，当用户选择一个日期，单击完成后就会选择日期了。

但是当前日期那个按钮点击后可能会没反映，并没有选中任何日期，而jquery在这个按钮上的实现也并没有让任何的日期

处于选中状态，它的作用只有一个，就是当你点开了日期控件，选了其他的月份或者年份，但是突然又想回到当前的日期面板，

那么点击这个按钮可以快速切换到当前的日期面板。

我们还可以使用下拉列表的形式来让用户选择月份和年份，使用形式如下：

$("#datepicker" ).datepicker({

changeMonth: true,

changeYear: true

});

显示效果如下：

设置了changeMonth和changeYear属性后会在年份和月份那里显示下拉列表来快速选择，而不用每次点击那个小箭头来向前或

向后选择日期了。

jquery还提供了星期的计算功能。当我们打开日期控件时，在控件左侧会显示这个月中的每个星期是今年的第几个星期。

使用形式如下：

$("#datepicker" ).datepicker({

showWeek: true,

firstDay: 1

});

效果如图：

日期左侧的44，45那些数字代表当前这个星期是今年的第几个星期。

同时我们也可以设置一次性的显示多个月份来同时供用户选择：

$("#datepicker" ).datepicker({

numberOfMonths: 3,

showButtonPanel: true

});

上述的代码会显示三个月份的日期，numberOfMonths属性设置要显示的日期的个数。

效果图：

有的日期控件会在输入框后提供一个小图标，当用户点击图标时才显示日期控件，jquery同样也可以：

$("#datepicker" ).datepicker({

showOn: "button",

buttonImage:"images/calendar.gif",

buttonImageOnly: true

});

上述的代码中，首先使用showOn属性来显示按钮，然后为按钮设置图标buttonImage就是为按钮设置图标的，其值为：

按钮图标的路径。最后一个buttonImageOnly属性，用来表示只有当用户点击按钮时才显示日期控件，而点击输入框不会再有任何显示了。

效果如下：

下面再来说说将日期控件作为一个日期显示牌，显示在网站上，而不是让用户来选择，我们可能会想让我们的页面中的某个部分

显示一个日历，标志出当前的年份月份以及星期。这时候我们可以用一个div来替代<input>标签 。

<divid="datepicker"></div>

$("#datepicker").datepicker();

这样就会有一个静态的日历显示在这个div中了。可以让你的网站用户一目了然的看到当前的日期

效果图：

datepicker的使用大概就是这样。当然，还有一些细节的东西，我没有说到，虽然是一个简单的简单的控件，但是由于扩展性和

可定制性较高，仍然有许多的高级特性是我没说到的。如果想自定义一些显示规则或者想学其他一些深层次的用法还是把官方的

API好好的看看吧，虽然都是英文，但是并不难，都是编程里常用的词汇而已。那样你会到更多。

jQueryUI Datepicker的使用的更多相关文章

  1. jQuery-ui datepicker的使用演示代码

    这两天使用jquery做一个web端展示的工具,遇到了不少问题也学到了不少知识.其中有一个就是在页面中显示日期选择器的功能,通过百度直接使用的是jquery datepicker 看到一篇使用说明很不 ...

  2. jQueryUI datepicker 报错： TypeError: inst is undefined

    前提:要引用的js等都引用好了 调用日期控件的input: <input id="starttime" name="starttime" class=&q ...

  3. jquery-ui datepicker使用

    这是一款老外设计的日期控件 很多显示方式都是国外的 需要自己调整一下 closeText: "Done", prevText: "上一月", nextText: ...

  4. jquery-ui Datepicker 创建 销毁

    控件选项defaultDate 设置日期控件的默认日期(高亮显示的日期),如果没有设置该选项,那么就使用当前日期,这一选项只适用于input元素没有设置value属性的情况altField 额外自定一 ...

  5. jqueryui datepicker refresh

    http://stackoverflow.com/questions/6056287/jquery-ui-datepicker-prevent-refresh-onselect 给选中的TD加背景色

  6. jQuery Mobile Datepicker 使用

    插件引入文件: <meta name="viewport" content="width=device-width, initial-scale=1"&g ...

  7. jQuery UI 日期选择器（Datepicker）

    设置JqueryUI DatePicker默认语言为中文 <!doctype html><html lang="en"> <head> < ...

  8. jquery datepicker日历控件

    地址:http://jqueryui.com/datepicker/ 使用:$( "#datepicker" ).datepicker(); $.datepicker.setDef ...

  9. [转]Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC - Part 4

    本文转自:http://www.asp.net/mvc/overview/older-versions/using-the-html5-and-jquery-ui-datepicker-popup-c ...

随机推荐

  1. iPad 多任务 Spilt View & Size Class

    iPad 多任务 Spilt View & Size Class 一.多任务简介 iOS 9 以后iPad新增了多任务的支持,主要形式有三种: Slide Over (侧边快捷打开) Spil ...

  2. Perl 正则表达式

    匹配:m/<regexp>;/ (还可以简写为 /<regexp>;/ ,略去 m)替换:s/<pattern>;/<replacement>;/转化: ...

  3. 2015baidu复赛　矩形面积（包凸 && ps:附quickhull模板）

    矩形面积 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  4. Swift2.1 语法指南——高级操作符

    原档:https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/Swift_Programmi ...

  5. Android 如何实现带滚动条的TextView，在更新文字时自动滚动到最后一行？

    1.在布局文件中放置一个TextView,给它添加scrollbars和fadeScrollbars两个属性. 如下设置:滚动条为垂直滚动条,并且一直可见(当TextView中的文字行数超过页面能显示 ...

  6. centos7 静态ip设置

    TYPE=Ethernet BOOTPROTO=static DEFROUTE=yes IPV4_FAILURE_FATAL=no IPV6INIT=yes IPV6_AUTOCONF=yes IPV ...

  7. Android开源项目(二)

    第二部分 工具库 主要包括那些不错的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多媒体相关及其他. 一.依赖注入DI 通过 ...

  8. Unity 用户手册用户指南二维纹理 (Texture 2D)

    http://www.58player.com/blog-2327-953.html 二维纹理 (Texture 2D) 纹理 (Textures) 使您的 网格 (Meshes).粒子 (Parti ...

  9. Palindrome Partitioning II Leetcode

    Given a string s, partition s such that every substring of the partition is a palindrome. Return the ...

  10. Understand:高效代码静态分析神器详解（转）

    之前用Windows系统,一直用source insight查看代码非常方便,但是年前换到mac下面,虽说很多东西都方便了,但是却没有了静态代码分析工具,很幸运,前段时间找到一款比source ins ...