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. CxImage

    启动项目的时候显示此时 百度“无法启动程序cximage.lib” 得到http://tieba.baidu.com/p/1935208210把第二项设为启动项即可 为什么设置第二项为启动项呢 因为h ...

  2. Java多线程初学者指南（7）：向线程传递数据的三种方法

    在传统的同步开发模式下,当我们调用一个函数时,通过这个函数的参数将数据传入,并通过这个函数的返回值来返回最终的计算结果.但在多线程的异步开发模式下,数据的传递和返回和同步开发模式有很大的区别.由于线程 ...

  3. 使一个div始终显示在页面中间

    使一个div始终显示在页面中间 假设我们有一个div层:<div id=”myDiv”></div> 首先,我们用css来控制它在水平上始终居中,那么我们的css代码应该是这样 ...

  4. 【PHP面向对象(OOP)编程入门教程】4.如何抽象出一个类？

    上面已经介绍过了, 面向对象程序的单位就是对象,但对象又是通过类的实例化出来的,所以我们首先要做的就是如何来声明类, 做出来一个类很容易,只要掌握基本的程序语法定义规则就可以做的出来,那么难点在那里呢 ...

  5. Java之properties文件读取

    1.工程结构 2.ConfigFileTest.java package com.configfile; import java.io.IOException; import java.io.Inpu ...

  6. JAVA序列化的作用

    所谓的Serializable,就是java提供的通用数据保存和读取的接口.至于从什么地方读出来和保存到哪里去都被隐藏在函数参数的背后了.这样子,任何类型只要实现了Serializable接口,就可以 ...

  7. [BZOJ1999][codevs1167][Noip2007]Core树网的核

    [BZOJ1999][codevs1167][Noip2007]Core树网的核 试题描述 设T=(V, E, W) 是一个无圈且连通的无向图(也称为无根树),每条边带有正整数的权,我们称T为树网(t ...

  8. WC总结

    去了人生中第一次全国WC,在四川绵阳南山中学举行,去了这么一次,感受颇多,不忍心白白地让时间流逝,于是写篇随笔记录一下. 全程,共计8天. [第1天] 签到,拿餐票,看了看讲义,觉得要狗带. 开营仪式 ...

  9. hiho #1309 任务分配

    #1309 : 任务分配 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定 N 项任务的起至时间( S1, E1 ), ( S2, E2 ), ..., ( SN,  ...

  10. AutoHotkey之自问自答

    偶然的机会,接触到了AutoHotkey这个东西,觉得不错,便花时间了解了一下.以此来记录我在学习AutoHotkey时遇到的各种问题,以及我对其的解释(有可能不专业甚至出错). Time:2015- ...