jQuery UI -- 日历选择器

用jQuery UI实现的日期选择器　　在这之前，我们先来了解一下jQuery UI。jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视空间。我们可以直接用它来构建具有很好交互性的 web 应用程序。　　本次采用的jQuery UI 的版本为:jquery-ui-1.10.3.custom.zip

文章共4,346字 · 阅读需要大约15分钟

一键AI生成摘要，助你高效阅读

问答

Never Yu

5297人浏览 · 2016-11-21 22:27:31

Never Yu · 2016-11-21 22:27:31 发布

一、用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 datapicker

但我们知道 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">