📌  相关文章
📜  如何使用 jQuery UI 制作基本的 Datepicker？(1)

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

如何使用 jQuery UI 制作基本的 Datepicker？

介绍

jQuery UI 是一个功能强大的用户界面库，其中包含了很多可定制的界面组件，如日期选择器（Datepicker）、对话框（Dialog）和自动完成（Autocomplete）等等。其中最常用的之一就是日期选择器。

在本文中，我们将向您介绍如何使用 jQuery UI 制作基本的 Datepicker。

步骤
1. 引入 jQuery UI 库文件

首先，需要将 jQuery 和 jQuery UI 的库文件引入你的 HTML 文档中。你可以从官方网站下载这些文件并在你的 Web 应用程序中使用它们。

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
2. 创建 HTML 输入框

接下来，我们需要创建一个 HTML 输入框来绑定 Datepicker。

Date: <input type="text" id="datepicker">
3. 初始化 Datepicker

在文档加载完成后，我们需要使用 jQuery 和 jQuery UI 来初始化 Datepicker。以下是一个简单的 JavaScript 代码片段，可以在加载完成后将 Datepicker 绑定到输入框上。

$(function() {
    $("#datepicker").datepicker();
});
4. 设置选项

对于 Datepicker，你可以设置一些选项来满足你的需求。以下是一些常见的选项：

  • dateFormat：设置日期格式
  • defaultDate：设置默认日期
  • minDate：设置最小日期
  • maxDate：设置最大日期
$(function() {
    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        defaultDate: new Date(),
        minDate: new Date(2018, 0, 1),
        maxDate: new Date(2018, 11, 31)
    });
});
完整代码片段
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Datepicker Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script>
    $(function() {
        $("#datepicker").datepicker({
            dateFormat: "yy-mm-dd",
            defaultDate: new Date(),
            minDate: new Date(2018, 0, 1),
            maxDate: new Date(2018, 11, 31)
        });
    });
  </script>
</head>
<body>
  <h2>Datepicker Example</h2>
  Date: <input type="text" id="datepicker">
</body>
</html>
结论

以上就是使用 jQuery UI 制作 Datepicker 的基本步骤。这只是一个简单的例子，你可以自定义选项来满足你的需求。jQuery UI 内置的组件非常多，通过学习它们，你可以轻松地制作出漂亮的 Web 应用程序。