📌  相关文章
📜  如何使用 jQuery 创建 UI 日期选择器？(1)

📅  最后修改于: 2023-12-03 15:23:54.956000             🧑  作者: Mango

如何使用 jQuery 创建 UI 日期选择器？

简介

在 Web 开发中，日期选择器是一个非常常见的组件。使用 jQuery UI 中的日期选择器组件，可以轻松地创建具有美观外观和易用性的日期选择器，为用户提供更好的体验。

前置条件

在使用 jQuery UI 中的日期选择器之前，你需要了解以下基本知识：

  • 基本的 HTML 和 CSS
  • JavaScript 和 jQuery 基础知识

同时，你需要准备以下资源：

  • jQuery 核心库
  • jQuery UI 库
  • jQuery UI 样式文件
创建日期选择器
步骤 1：引入依赖项

在 HTML 文件中引入 jQuery 和 jQuery UI 的库文件：

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

<!-- 引入 jQuery UI 库和 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>
步骤 2：创建 HTML 元素

在 HTML 文件中创建一个 <input> 元素，用于展示日期选择器：

<input type="text" id="datepicker">
步骤 3：使用 jQuery UI 中的日期选择器组件

在 JavaScript 文件中，使用 jQuery UI 的 .datepicker() 方法来初始化日期选择器：

$( function() {
  $( "#datepicker" ).datepicker();
} );
完整代码
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>
自定义日期选择器

如果需要通过 jQuery UI 中的日期选择器组件设置自定义的日期格式、语言、主题等，可以在初始化日期选择器时设置对应的选项。

示例代码
$( function() {
  $( "#datepicker" ).datepicker({
    dateFormat: "yy-mm-dd",   // 设置日期格式
    showOtherMonths: true,    // 显示其它月份的日期
    selectOtherMonths: true,  // 可以选择其它月份的日期
    changeMonth: true,        // 显示月份选择器
    changeYear: true,         // 显示年份选择器
    yearRange: "1900:2022",   // 年份范围设置
    minDate: new Date(1900, 0, 1),  // 最小日期
    maxDate: new Date(2022, 11, 31),  // 最大日期
  });
} );
总结

通过以上简单的几个步骤，你可以轻松地创建一个具有美观外观和易用性的日期选择器。同时，使用 jQuery UI 中的日期选择器组件，你可以自定义日期格式、语言、主题等，以满足不同项目的需求。