jQuery UI Datepicker show() 方法(1)

📌 相关文章

📜 jQuery UI Datepicker show() 方法(1)

📅 最后修改于: 2023-12-03 14:43:11.954000 🧑 作者: Mango

jQuery UI Datepicker show() 方法

介绍

jQuery UI Datepicker 是 jQuery UI 中的一个日期选择插件，它可以帮助用户方便的选择日期，支持多种语言，还有很多配置选项。show() 方法是 Datepicker 的一个实例方法，用于在指定元素上显示日期选择器。

语法

$(selector).datepicker("show")

或者

$(selector).datepicker("show", date)

selector：一个用于标识日期选择器的选择器或者 DOM 元素。
date：（可选）一个 JavaScript Date 对象或可转换为日期的字符串，表示要在日期选择器上高亮显示的日期。

返回值

该方法没有返回值。

示例

基本用法

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.staticfile.org/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.staticfile.org/jqueryui/1.12.1/jquery-ui.min.css">
  <title>jQuery UI Datepicker show() 方法示例</title>
</head>
<body>
  <div class="container mt-5">
    <h1>jQuery UI Datepicker show() 方法示例</h1>
    <div class="form-group">
      <label for="date">选择日期：</label>
      <input type="text" id="date" class="form-control">
    </div>
    <button id="btn-show" class="btn btn-primary">显示日期选择器</button>
  </div>
  
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script>
    $(function() {
      // 初始化日期选择器
      $("#date").datepicker({
        dateFormat: "yy-mm-dd"
      });
      // 点击按钮显示日期选择器
      $("#btn-show").on("click", function() {
        $("#date").datepicker("show");
      });
    });
  </script>
</body>
</html>

上面的代码演示了如何在文本框中使用 Datepicker，并在按钮点击时显示日期选择器。

显示指定日期

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.staticfile.org/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.staticfile.org/jqueryui/1.12.1/jquery-ui.min.css">
  <title>jQuery UI Datepicker show() 方法示例</title>
</head>
<body>
  <div class="container mt-5">
    <h1>jQuery UI Datepicker show() 方法示例</h1>
    <div class="form-group">
      <label for="date">选择日期：</label>
      <input type="text" id="date" class="form-control">
    </div>
    <button id="btn-show" class="btn btn-primary">显示日期选择器</button>
    <button id="btn-show-today" class="btn btn-primary">显示今天日期</button>
  </div>
  
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script>
    $(function() {
      // 初始化日期选择器，设置默认日期为 2021-06-01
      $("#date").datepicker({
        dateFormat: "yy-mm-dd",
        defaultDate: "2021-06-01"
      });
      // 点击按钮显示日期选择器
      $("#btn-show").on("click", function() {
        $("#date").datepicker("show");
      });
      // 点击按钮显示今天日期
      $("#btn-show-today").on("click", function() {
        var today = new Date();
        $("#date").datepicker("show", today);
      });
    });
  </script>
</body>
</html>

上面的代码演示了如何在文本框中使用 Datepicker，并在点击按钮时显示选定日期或者今天日期。

注意事项

show() 方法只能用于初始化了 Datepicker 的文本框或输入框上。
如果 Datepicker 正在显示，则调用该方法不会产生效果。