jQuery如何操作日历

72次阅读
没有评论

要在 HTML 页面中操作日历,可以使用 jQuery UI 的日历小部件(datepicker widget)。该小部件提供了一个弹出式日历,用户可以从中选择日期。

下面是一个使用 jQuery UI 日历小部件的 HTML 页面示例,其中用户可以在日历上选择日期并将其显示在文本框中:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Datepicker Widget Example</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/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 库(用于操纵 HTML 文档)
  • jQuery UI 样式表(用于渲染日历小部件)
  • jQuery UI 库(提供了日历小部件)

然后,我们定义了一个文本输入框,用于显示选定日期。通过使用 jQuery UI 库提供的 datepicker() 方法,我们将其与日历小部件关联起来。在这个例子中,我们只是将 datepicker() 方法绑定到文本输入框上,这样用户就可以在单击文本框时打开日历并选择日期了。

请注意,我们在页面头部引用了这三个外部资源,因为它们需要在页面加载时被加载。同时,我们在页面 DOM 加载完成时执行了一段代码,将日历小部件绑定到输入框上。

当用户在日历上选择日期时,日历会自动关闭,并将选定日期的值设置为文本框的值。可以使用 jQuery 的 val() 方法来读取和设置文本输入框的值,例如:

var selectedDate = $('#datepicker').val();
正文完
 
评论(没有评论)