如何使用 jQuery UI 在页面中显示日期选择器？

jQuery UI 是一个非常流行的 JavaScript 框架，它提供了一组美观而易用的交互式组件，可以方便地实现各种常见的界面功能。

其中，日期选择器是最常用的之一。本文将介绍如何在页面中使用 jQuery UI 来显示日期选择器。

引入 jQuery UI 库

要使用 jQuery UI 的组件，首先必须引入 jQuery 和 jQuery UI 的库文件。可以从官方网站 https://jqueryui.com/ 下载。

<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 jQuery UI 库 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>

创建日期选择器

创建日期选择器的方法非常简单，只需在输入框上调用 datepicker() 方法即可。

<label for="datepicker">选择日期：</label>
<input type="text" id="datepicker">

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

这段代码会在文档准备就绪时，将输入框的 id 设置为 datepicker 的元素转换为日期选择器。

配置日期选择器

在默认情况下，日期选择器的外观和行为都是由 jQuery UI 默认主题来决定的。但是，你可以通过配置不同的选项来自定义日期选择器的外观和行为。

$(document).ready(function() {
  $("#datepicker").datepicker({
    showOn: "button",
    buttonImage: "images/calendar.png",
    buttonImageOnly: true,
    buttonText: "选择日期",
    dateFormat: "yy-mm-dd",
    maxDate: "+0",
    minDate: "-1m"
  });
});

这段代码通过传递参数的方式，配置了日期选择器的外观和行为：

• showOn：表示在哪个元素上显示日期选择器，可以是 focus（聚焦时显示）、button（点击按钮时显示）或 both（同时支持两种方式），默认为 focus。
• buttonImage：表示显示在按钮上的图片的 URL 地址。
• buttonImageOnly：表示是否只显示按钮上的图片，不显示文字。
• buttonText：表示按钮上显示的文字。
• dateFormat：表示日期的格式，其中 yy 表示四位年份，mm 表示月份（前导 0），dd 表示日期（前导 0），默认为 'mm/dd/yy'。
• maxDate：表示可选的最大日期，可以是一个日期字符串（格式与 dateFormat 相同）或一个数值（表示从今天起的天数），默认为 null。
• minDate：表示可选的最小日期，格式与 maxDate 相同。

自定义样式

可以通过 CSS 来自定义日期选择器的外观。以下是一些常见的样式规则：

.ui-datepicker {
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #ccc;
  background: #fff;
  box-shadow: 0 0 5px #ccc;
}

.ui-datepicker-header {
  background: #f5f5f5;
  border-radius: 3px 3px 0 0;
  border-bottom: 1px solid #ccc;
  padding: 5px;
}

.ui-datepicker-prev, .ui-datepicker-next {
  display: inline-block;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-width: 5px 7px;
  margin: 0 3px;
  cursor: pointer;
}

.ui-datepicker-prev {
  border-right-color: #888;
  float: left;
}

.ui-datepicker-next {
  border-left-color: #888;
  float: right;
}

.ui-datepicker-calendar {
  width: 200px;
}

.ui-datepicker-calendar td {
  text-align: center;
  padding: 2px;
}

.ui-datepicker-calendar .ui-state-default {
  display: inline-block;
  border-radius: 3px;
  padding: 2px 4px;
  cursor: pointer;
}

.ui-datepicker-calendar .ui-state-hover {
  background: #eaeaea;
}

.ui-datepicker-calendar .ui-state-active {
  background: #888;
  color: #fff;
}

总结

本文介绍了如何在页面中使用 jQuery UI 来显示日期选择器，并对日期选择器的配置和自定义样式进行了详细讲解。通过本文的学习，相信你能够轻松地在自己的项目中使用 jQuery UI 来实现日期选择器功能。