jQueryUI Datepicker的使用

时间 2019-12-20

标签 jqueryui datepicker 使用栏目 JQuery 繁體版

原文原文链接

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

以及要使用的语言。css

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

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

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

ctrl+home- 当前月份网站

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

enter- 接受当前选定的日期插件

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

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

以上是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，不然会报错

$(document).ready(function() {

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

});

</script>

</head>

<body>

</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好好的看看吧，虽然都是英文，可是并不难，都是编程里经常使用的词汇而已。那样你会到更多。