如何使用jQuery创建UI Datepicker

使用jQuery创建UI Datepicker可以通过以下步骤进行：

第一步：引入jQuery和jQuery UI

为了使用jQuery UI的Datepicker插件，需要在页面中引入jQuery和jQuery UI库：

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

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

第二步：创建HTML表单

创建一个日期选择器所需要的HTML表单元素，可以是input元素或div元素（在此示例中，使用input元素）：

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

第三步：使用jQuery Datepicker插件

通过jQuery和jQuery UI的代码，将Datepicker应用于HTML表单元素。在此示例中，将日期格式指定为“yy-mm-dd”，并使用默认参数：

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

其中，$是jQuery函数的简写，$(function() {...})表示当页面加载完成时执行内部的代码。$("#datepicker")选中了具有id="datepicker"属性的元素，并通过.datepicker()将Datepicker应用于该元素。

示例

以下是一个完整的示例，展示如何使用jQuery创建UI Datepicker。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Datepicker示例</title>
  <!-- 引入jQuery库 -->
  <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>

  <!-- 引入jQuery UI库 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
  <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <label for="datepicker">选择日期:</label>
  <input type="text" id="datepicker">

  <script>
    $(function() {
      $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd"
      });
    });
  </script>
</body>
</html>

在此示例中，通过id="datepicker"选中了input元素，并通过.datepicker()将Datepicker应用于该元素。用户点击具有该id属性的元素，就能展示一个日期选择器。

示例2

以下是一个更加复杂的示例，展示如何使用jQuery创建UI Datepicker，支持区间选择。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Datepicker示例</title>
  <!-- 引入jQuery库 -->
  <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>

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

  <style>
    .ui-datepicker-calendar {
      display: none;
    }
  </style>
</head>
<body>
  <label for="datepicker-from">开始日期:</label>
  <input type="text" id="datepicker-from">

  <label for="datepicker-to">结束日期:</label>
  <input type="text" id="datepicker-to">

  <script>
    $(function() {
      var dateFormat = "yy-mm-dd";
      var from = $("#datepicker-from")
          .datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 2
          })
          .on("change", function() {
            to.datepicker("option", "minDate", getDate(this));
          }),
        to = $("#datepicker-to").datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 2
        })
        .on("change", function() {
          from.datepicker("option", "maxDate", getDate(this));
        });

      function getDate(element) {
        var date;
        try {
          date = $.datepicker.parseDate(dateFormat, element.value);
        } catch (error) {
          date = null;
        }
        return date;
      }
    });
  </script>
</body>
</html>

在此示例中，通过id选中了两个input元素，可以根据需求设置这些元素的样式。此示例还增加了一些其他的参数，如defaultDate，changeMonth和numberOfMonths等，以便更好地自定义使用。

另外，这个示例中还定义了一个名为getDate(element)函数，可以将当前日期元素的值转换为日期对象。这个函数处理了多种情况，包括不合法的输入。通过使用这个函数，可以将用户输入的日期转换为JavaScript日期对象，从而更方便地进行操作。

最后，使用了.on()方法对change事件进行监听，并在收到该事件时更新其他Datepicker的最小和最大日期值，以实现区间选择的效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何使用jQuery创建UI Datepicker - Python技术站

如何使用jQuery创建UI Datepicker

第一步：引入jQuery和jQuery UI

第二步：创建HTML表单

第三步：使用jQuery Datepicker插件

示例

示例2

相关文章