多个输入字段上的 jQuery datepicker

在 Web 开发中，日期选择器是一个经常用到的组件。jQuery datepicker 插件是一个轻量级、灵活、易于扩展的日期选择器。本文将介绍如何在多个输入字段上使用 jQuery datepicker，以及如何自定义日期格式和限制可选日期范围。

准备工作

在使用 jQuery datepicker 之前，需要引入必要的文件。可以在 jQuery UI 官网 中下载 jQuery UI 样式及 JS 文件，或者使用 CDN 引入。在本文中，我们使用以下代码引入必要的文件：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

多个输入字段上使用 DatePicker

在多个输入字段上使用 DatePicker 可以通过 jQuery 的选择器实现。例如，要在 id 为 datepicker1 和 datepicker2 的输入字段上使用 DatePicker，可以使用以下代码：

<input type="text" id="datepicker1">
<input type="text" id="datepicker2">

$(function() {
  $("#datepicker1, #datepicker2").datepicker();
});

这样，在两个输入字段上将会显示 DatePicker。

自定义日期格式

默认情况下，jQuery datepicker 使用 MM/DD/YY 格式显示日期。但是，可以通过设置 dateFormat 选项来自定义日期格式。例如，要使用 YYYY-MM-DD 格式显示日期，可以使用以下代码：

$(function() {
  $("#datepicker1, #datepicker2").datepicker({
    dateFormat: "yy-mm-dd"
  });
});

限制可选日期范围

有时，需要限制用户可选的日期范围。可以使用 minDate 和 maxDate 选项来实现。例如，要限制可选日期范围为当前日期到30天后，可以使用以下代码：

$(function() {
  $("#datepicker1, #datepicker2").datepicker({
    minDate: 0,
    maxDate: "+30d"
  });
});

上述代码中，minDate 被设置为 0，表示只能选择当前日期或以后的日期。maxDate 被设置为 "+30d"，表示只能选择当前日期到30天后的日期。

结语

通过本文的介绍，你学会了在多个输入字段上使用 jQuery datepicker，以及如何自定义日期格式和限制可选日期范围。如果你需要更多关于 jQuery datepicker 的信息，可以参考 jQuery UI 官方文档。