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. 什么是SEM?

    SEM是Search Engine Marketing的英文缩写,其中文意思就是搜索引擎营销.台湾和香港.澳门也称为搜寻销售,意思都差不多.SEM更多强调的是综合手段在搜索引擎上的企业传播和促进和销售 ...

  2. NLPIR_Init文本分词-总是初始化失败，false，Init ICTCLAS failed!

    前段时间用这个分词用的好好的,突然间就总是初始化失败了: 网上搜了很多,但是不是我想要的答案,最终去了官网看了下:官网链接 发现哇,版本更新了啊,下载页面链接 麻利的下载好了最新的文档,一看压缩包名字 ...

  3. Android中实现圆角矩形及半透明效果。

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们为了美观,有时候需要使用圆角矩形,或半透明之类的效果,在网页设计中很容易实现.但在Android开发中 ...

  4. 透过统计力学，模拟软物质——EPJE专访2016年玻尔兹曼奖得主Daan Frenkel

    原文来源:Eur. Phys. J. E (2016) 39: 68 2016年玻尔兹曼奖得主Daan Frenkel接受欧洲物理学报E专访,畅谈统计物理在交叉科学研究中的前所未有的重要性. 统计物理 ...

  5. 今天微信群需要人家通过吗？是微信bug吗

    今天遇到微信群拉人的问题,所以来和大家取经,刚开始拉人一下就拉进去了,后来拉的需要人家通过,今天朋友些也帮我拉人也是这样的,所以想问下微信群扩容的问题.晚上有位朋友跟我说一次拉十个人,不能拉多,这样就 ...

  6. 【python网络编程】使用rsa加密算法模块模拟登录新浪微博

    一.基础知识 http://blog.csdn.net/pi9nc/article/details/9734437 二.模拟登录 因为上学期参加了一个大数据比赛,需要抓取数据,所以就想着写个爬虫抓取新 ...

  7. IE8 margin: auto 无法居中

    需要给body元素添加属性 body { text-align: center; width: 100%; } ok,可以正常居中.

  8. FineUI第十一天---布局概述

    布局概述 1.填充整个页面: 让整个容器填充整个页面,设置PageManager的AutoSizePanelID为需要填充整个页面的容器控件ID. 2. 填充整个容器(Fit): 让一个控件填满另一个 ...

  9. C语言多线程编程 死锁解析

    1.假设有两个线程 A线程负责输出奇数.B线程负责输出偶数. 2.当A线程进入锁定状态是,主线程突然异常将A线程停止,这时将导致B线程也无法继续执行,处于死锁状态.如下代码: #include < ...

  10. 通过NavMeshObstacle解决NavMesh防卡

    http://www.unity蛮牛.com/thread-33383-1-1.html. 许久未曾发帖了,最近忙于换工作的问题,经常处于纠结状态,so...偶尔上蛮牛还能看到大家对我的支持,感觉还是 ...