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. Dirty Markup - 在线代码美化工具

    如果你需要一个帮助你规整书写混乱的代码的工具的话,我强烈推荐给你这个在线代码美化工具 - Dirty Markup.这个在线工具能够帮助你有效的处理HTML/HTML5,CSS和javascript代 ...

  2. IOC和bean容器

  3. [Storm] 内部消息缓存

    这篇文件翻译自 http://www.michael-noll.com/blog/2013/06/21/understanding-storm-internal-message-buffers/ 当进 ...

  4. 全栈工程师是不是必须得会HTML5？

    最近看了很多招聘,都要求前端工程师必须得会HTML5.个人觉得只要会了html,HTML5不会太难,不过全栈工程师要求会的太多了 HTML CSS JavaScript HTML 5 CSS 3 都说 ...

  5. Hadoop 面试题之Hbase

    Hadoop 面试题之九 16.Hbase 的rowkey 怎么创建比较好?列族怎么创建比较好? 答: 19.Hbase 内部是什么机制? 答: 73.hbase 写数据的原理是什么? 答: 75.h ...

  6. linux查找某一进程并杀死

    1. 查找redis进程 ps  -ef|grep   redis-server 2.打印第二个参数,因为上面第二列是进程号 3.这两个进程号有一个是grep进程号,所以要去掉,反选 grep ps ...

  7. mybaitis uuid插入和定义返回类型

  8. 客户端安全-xss-2解决方案

    1.需求 提供xss解决方案 2.方式 对需要显示在html中的用户代码进行编码 3.处理方案 1.用户的数据到后端前用下面的编码层代码进行编码. function htmlEncodeCharact ...

  9. Android实用代码模块集锦

    1. 精确获取屏幕尺寸(例如:3.5.4.0.5.0寸屏幕) 1 2 3 4 5 6 public static double getScreenPhysicalSize(Activity ctx)  ...

  10. 4.了解AngularJS模块和依赖注入

    1.模块和依赖注入概述 1.了解模块 AngularJS模块是一种容器,把代码隔离并组织成简洁,整齐,可复用的块. 模块本身不提供直接的功能:包含其他提供功能的对象的实例:控制器,过滤器,服务,动画 ...