博客

如何使用jQuery创建UI Datepicker

  • Post category:jquery

下面是如何使用jQuery创建UI Datepicker的完整攻略：

1. 引入jQuery和jQuery UI库

在使用jQuery UI Datepicker前，需要先引入jQuery库和jQuery UI库。可以在 <head> 标签中添加以下代码：

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

上面代码中的 jQuery UI 库是通过 CDN 引入的，也可以下载到本地，然后引入到项目中。

2. 创建一个文本框

Datepicker一般是用来选择日期的。为了使用Datepicker，需要创建一个HTML输入框（通常使用<input type="text">）。

下面是一个示例代码：

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

3. 初始化Datepicker

要使用jQuery UI Datepicker插件，需要在jQuery中初始化插件。可以使用以下代码将Datepicker连接到选定的输入框：

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

上面代码中的 datepicker() 方法将会取代输入框，并将日期选择器附加到文本框上。

4. 自定义日期格式

你可以使用 dateFormat 选项来指定日期格式。默认情况下，Datepicker使用 MM/DD/YY 格式，但是你可以通过以下方式更改它：

$( function() {
  $( "#datepicker" ).datepicker({
    dateFormat: "dd/mm/yy"
  });
} );

上述代码中dateFormat选项的值指定为 dd/mm/yy，这样就把日期格式更改为dd/mm/yy。

5. 显示月份和年份下拉菜单

默认情况下，Datepicker不会显示月份和年份下拉菜单。但是，添加 showMonthAfterYear 选项可以在年份之后显示月份下拉菜单。添加changeYear 和 changeMonth选项可以显示年份和月份下拉列表，允许用户手动选择。

下面是一个示例代码：

$( function() {
  $( "#datepicker" ).datepicker({
    showMonthAfterYear: true,
    changeYear: true,
    changeMonth: true
  });
} );

示例1：自定义日期范围

下面是一个示例代码。该代码为Datepicker指定可选择的日期范围，不允许选择过去的日期，并限制未来的选择日期不得超过10天。

$( function() {
  var today = new Date();
  $( "#datepicker" ).datepicker({
    minDate: today,
    maxDate: "+10D"
  });
} );

上述代码中，minDate选项指定了最早可选择的日期为今天，maxDate选项限制未来可选择的日期不得超过10天。

示例2：添加按钮

下面是一个示例代码。在文本框下面添加两个按钮，一个按钮用于清除选定的日期，另一个按钮用于显示当前日期。

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

  // 添加清除按钮
  $( "#clear" ).click( function() {
    $( "#datepicker" ).val( "" );
  });

  // 添加当前日期按钮
  $( "#today" ).click( function() {
    var today = new Date();
    $( "#datepicker" ).datepicker( "setDate", today );
  });
} );

上述代码中，清除按钮和当前日期按钮通过ID获取，然后分别绑定了点击事件。清除按钮可以通过设置输入框的值为 “” 清空选定的日期，当前日期按钮可以通过 setDate 方法设置选中的日期为当前日期。

希望以上内容对您有所帮助。

Tags: