jQuery 日历插件 Datepicker 用法分析

Datepicker 是 jQuery UI 的插件之一，它提供了一个简单易用的日历控件，可以方便地选择日期、时间等。

引入 Datepicker 插件

在使用插件之前，需要先引入 jQuery 库和 jQuery UI 库，代码如下：

<!-- 引入 jQuery 库 -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<!-- 引入 jQuery UI 库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/themes/base/jquery-ui.css">
<script src="https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/jquery-ui.min.js"></script>

基本用法

初始化

Datepicker 的最基本用法是在一个文本输入框上调用 datepicker() 方法。例如：

<input type="text" id="datepicker">

$(function() {
  $("#datepicker").datepicker();
});

这样就会在文本输入框旁边自动生成一个可弹出的日历控件。

配置选项

Datepicker 可以通过配置选项来自定义样式、语言、可选日期范围等。例如：

$(function() {
  $("#datepicker").datepicker({
    showButtonPanel: true,   // 显示今天和清除按钮
    minDate: "-1M",          // 最小日期为一个月前
    maxDate: "+1M",          // 最大日期为一个月后
    dateFormat: "yy-mm-dd",  // 显示格式为 年-月-日
    changeMonth: true,       // 显示月份下拉框
    changeYear: true         // 显示年份下拉框
  });
});

事件处理

Datepicker 提供了很多事件处理函数，可以在用户选定日期后执行相应操作。例如：

$(function() {
  $("#datepicker").datepicker({
    onSelect: function(dateText, inst) {
      alert("选定日期为：" + dateText);
    }
  });
});

在输入框外生成日历控件

Datepicker 还可以生成一个独立的日历控件，而不是在输入框旁边弹出。例如：

$(function() {
  $("<div>").datepicker({
    showOn: "button", // 按钮触发弹出日历
    buttonImage: "calendar.png",
    buttonImageOnly: true
  }).appendTo("#container");
});

这样就会在 id="container" 的元素中生成一个带有按钮的日历控件。

示例

示例1：改变日历控件的主题

<input type="text" id="datepicker">

<!-- 引入 jQuery 主题库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/themes/base/jquery-ui.css">

<button id="themeButton">改变主题</button>

<script>
$(function() {
  $("#datepicker").datepicker();

  $("#themeButton").click(function() {
    // 改变主题为红色
    $("#datepicker").datepicker("option", "theme", "ui-datepicker-red");
  });
});
</script>

<style>
.ui-datepicker-red .ui-state-default {
  background-color: red;
  color: #FFFFFF;
}
</style>

示例2：限制可选日期范围

<input type="text" id="datepicker">
<p>只能选择从今天开始的一个月内的日期。</p>

<script>
$(function() {
  $("#datepicker").datepicker({
    minDate: 0,
    maxDate: "+1M",
    onSelect: function(dateText) {
      alert("选定日期为：" + dateText);
    }
  });
});
</script>

在这个示例中，我们限制了可选日期范围为从今天开始的一个月内，用户只能选择这个范围内的日期。当用户选定日期后，会弹出提示框显示选定的日期。