一、用jQuery UI实现的日期选择器
在这之前,我们先来了解一下jQuery UI。jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视空间。我们可以直接用它来构建具有很好交互性的 web 应用程序。
本次采用的jQuery UI 的版本为:jquery-ui-1.10.3.custom.zip。里面的目录结构如下:
1. css,包含与jQuery UI 相关的的 CSS 文件;
2. js,包含 jQuery UI 相关的 JavaScript 文件;
3. Development-bundle,包含多个不同的子目录:demos(jQuery UI 示例文件)、docs(jQuery UI 的文档文件)、themes(CSS 主题文件)和 ui(jQuery UI 的JavaScript 文件)。
4. Index.html,可以查看 jQuery UI 功能的索引页。
CSS 主题
CSS 主题就是jQuery UI 的皮肤,有各种色调的模版提供使用。当然,jQuery UI 还提供了多种主题可供选择,我们可以在这里:http://jqueryui.com/themeroller/查看已有模版样式或者定制主题。
那么,一个用 jQuery UI 来实现的日期选择器,我们需要加载几个文件,模版如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日期选择-jqueryUI</title>
<link rel="stylesheet" href="./jquery-ui-1.10.3.custom/css/smoothness/jquery-ui-1.10.3.custom.min.css">
</head>
<body>
<input type="text" id="date">
<script src="./jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
<script src="./jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<script>
$(function(){
$('#date').datepicker();
});
</script>
</body>
</html>
现在,这个demo中,其实我们已经实现了一个日期选择器的功能。
但我们知道 jQuery UI
的文件包是一系列部件的合集,,所以说,如果我们只希望借助 jQuery UI
来 实现一个日期选择器,我们没必要引入整个的 jQuery UI
,而只需要引入 datepicker
相关的文件即可。
1、关于CSS的部分,将我们引入的 css
文件:jquery-ui-1.10.3.custom.min.css
替换为:
jquery.ui.core.min.css
和
jquery.ui.theme.min.css
和
jquery.ui.datepicker.min.css
。
<link rel="stylesheet" href="./jquery-ui-1.10.3.custom/development-bundle/themes/smoothness/jquery.ui.core.css">
<link rel="stylesheet" href="./jquery-ui-1.10.3.custom/development-bundle/themes/smoothness/jquery.ui.theme.css">
<link rel="stylesheet" href="./jquery-ui-1.10.3.custom/development-bundle/themes/smoothness/jquery.ui.datepicker.css">
jquery-ui-1.10.3.custom.min.css
的大小是27KB,而 jquery.ui.core.min.css
和 jquery.ui.theme.min.css
和 jquery.ui.datepicker.min.css
的大小一起是19KB。
2、关于JS的部分,将我们引入的 js
文件:jquery-ui-1.10.3.custom.min.js
替换为:
jquery.ui.core.js
和
jquery.ui.datepicker.js
。
<script src="./jquery-ui-1.10.3.custom/development-bundle/ui/jquery.ui.core.js"></script>
<script src="./jquery-ui-1.10.3.custom/development-bundle/ui/jquery.ui.datepicker.js"></script>
jquery-ui-1.10.3.custom.min.js
的大小是223KB,而jquery.ui.core.js
和 jquery.ui.datepicker.js
的大小一起是84KB。
这样,我们同样能实现一个日期选择器的功能,但是就没有 jQuery UI
其他部件的功能。
为了让日期选择器与我们的网站整体格调相似,我们先来看一下 datepicker() 样式的修改。
核心手段就是定位要修改部位的 class
,然后在自己的 css
中修改样式即可覆盖。下面列举几个例子:
/*更改jQuery UI主题的对话框header的背景*/
.ui-widget-header {
background:url(../img/ui_header_bg.png);
}
/*按钮正常状态的背景*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background:url(../img/ui_header_bg.png);
}
/*日历UI的今天单元格样式*/
.ui-datepicker-today .ui-state-highlight {
border:1px solid #eee;
color:#f60;
}
/*日历UI的选定单元格样式*/
.ui-datepicker-current-day .ui-state-active {
border:1px solid #eee;
color:#06f;
}
注意:默认情况下,日历显示为英文。如果你想使用中文日历,直接引入中文语言包即可。或者把中文语言包的几行代码整合到某个js文件里即可。(为了减少文件的引入,推荐采用后者)
中文语言包是 :
<script src="./jquery-ui-1.10.3.custom/development-bundle/ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>
引入后的日期选择器就变成这样了:
3、datepicker()方法中的属性
日历方法有两种形式:
1.datepicker(options),options 是以键值对的形式传参,每个键值对表示一个选项。
2.datepicker(‘action’,param),action是操作对话框方法的字符串,param则是options的某个选项。
注意:dayNames,以数组形式指定星期中的天的长格式。有些长格式显示不了,是因为显示地方有限,所以不推荐用。
注意:默认情况下,日历显示为英文。如果你想使用中文日历,直接引入中文语言包即可。或者把中文语言包的几行代码整合到某个 js
文件里即可。
$(function(){
$('#date').datepicker({
dateFormat: 'yy+mm+dd',
});
});
以 numberOfMonths
来举例:同时显示的月份个数。
$(function(){
$('#date').datepicker({
dateFormat: 'yy+mm+dd',
numberOfMonths: 3
});
});
以 changeMonth
来举例,如果设置为true,显示快速选择月份的下拉列表。
$(function(){
$('#date').datepicker({
dateFormat: 'yy+mm+dd',
showOtherMonths: true,
changeMonth: true
});
});
datepicker日期选择选项
我们以minDate,yearRange来看下面的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery-ui-datepicker</title>
<link rel="stylesheet" href="./jquery-ui-1.10.3.custom/css/smoothness/jquery-ui-1.10.3.custom.min.css">
</head>
<body>
<input id="date-start" type="text">
<input id="date-end" type="text">
<script src="./jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
<script src="./jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="./jquery-ui-1.10.3.custom/development-bundle/ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>
<script>
$(document).ready(function(){
$("#date-start").datepicker({
firstDay: 2,
showMonthAfterYear: true,
showButtonPanel: true,
// minDate: new Date(),
changeYear: true,
yearRange: "1949:2020"
});
$("#date-end").datepicker({
firstDay: 2,
showMonthAfterYear: true,
showButtonPanel: true,
minDate: new Date(),
changeYear: true,
yearRange: "1949:2020"
});
});
</script>
</body>
</html>
我们以showAnim,duration来举例:
$("#date-end").datepicker({
firstDay: 2,
yearRange: "1949:2020",
minDate: -10000,
maxDate: 0,
defaultDate: -1,
hideIfNoPrevNext: true,
gotoCurrent: false,
showAnim: "slideDown",
duration: 500
});
关于 showAnim
的 可选值有如下一些:
4、datepicker()方法的事件
除了属性设置外,datepicker()方法也提供了大量的事件。这些事件可以给各种不同状态时提供回调函数。这些回调函数中的this值等于对话框内容的div对象,不是整个对话框的div。
下面来看一个datepicker()方法事件的例子:
$("#date-end").datepicker({
firstDay: 2,
yearRange: "1949:2020",
minDate: -10000,
maxDate: 0,
defaultDate: -1,
hideIfNoPrevNext: true,
gotoCurrent: false,
showAnim: "pulsate",
duration: 500,
beforeShow: function(){
alert("日历显示之前触发");
},
beforeShowDay: function(date){
if(date.getDate() == 1) {
return [false,'a','不能选择'];
} else {
return [true];
}
},
onChangeMonthYear: function(year,month,inst) {
alert(year);
},
onClose: function(dateText,inst) {
alert(dateText);
},
onSelect: function(dateText,inst) {
alert(dateText);
}
});
注意:jQuery UI 只允许使用选项中定义的事件,目前还不可以使用on()方法来管理。
//显示日历
$("#date").datepicker('show');
//隐藏日历
$("#date").datepicker('hide');
//获取当前选定日期
$("#date").datepicker('getDate').getFullYear();
//设置当前选定日期
$("#date").datepicker('setDate','12/12/2016');
//删除日历
$("#date").datepicker('destroy');
//获取日历的jQuery对象
$("#date").datepicker('widget');
//刷新日历
$("#date").datepicker('refresh');
//获取是否禁用日历
alert($("#date").datepicker('isDisabled'));
//获取属性的值
alert($("#date").datepicker('option','disabled'));
//设置属性的值
$("#date").datepicker('option','disabled',true);
相关文章:
air-datepicker – 日历选择器
JQuery EasyUI – 日历选择器
写在最后: 约定优于配置——-软件开发的简约原则.
——————————– (完)————————————–
我的
个人网站:https://neveryu.github.io/guestbook/
Github: https://github.com/Neveryu
新浪微博:http://weibo.com/Neveryu
更多学习资源请关注我的新浪微博….
width="100%" height="500" class="share_self" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=1&ptype=1&speed=0&skin=8&isTitle=1&noborder=1&isWeibo=1&isFans=0&uid=5346488237&verifier=d529ff3a&dpc=1">