jQWidgets jqxCalendar refresh() 方法(1)

📌 相关文章

📜 jQWidgets jqxCalendar refresh() 方法(1)

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

jQWidgets jqxCalendar refresh() 方法

jQWidgets jqxCalendar 是一个基于 jQuery 的日期选择控件。它提供了丰富的 API 和事件，支持国际化语言，并能够自定义样式。

refresh() 方法 可以在修改设置后刷新日期选择器，以便应用更改。

语法

$(selector).jqxCalendar('refresh');

参数

无。

返回值

该方法没有返回值。

示例

在以下示例中，当点击 "更改选项" 按钮时，使用 setOptions() 方法更改日期选择器的最小日期和最大日期，并使用 refresh() 方法刷新控件。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jqxCalendar refresh()</title>
  <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
  <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
</head>
<body>
  <div id="jqxCalendarContainer"></div>
  <button id="changeOptionsButton">更改选项</button>

  <script>
    $(document).ready(function () {
      // 初始化控件
      $('#jqxCalendarContainer').jqxCalendar();

      // 注册按钮点击事件
      $('#changeOptionsButton').on('click', function () {
        // 更改选项
        $('#jqxCalendarContainer').jqxCalendar('setOptions', {
          value: null, // 清空选中日期
          minDate: new Date(2020, 0, 1), // 设置最小日期
          maxDate: new Date(2022, 11, 31), // 设置最大日期
        });

        // 刷新日期选择器
        $('#jqxCalendarContainer').jqxCalendar('refresh');
      });
    });
  </script>
</body>
</html>

注意事项

在更改日期选择器的选项后需要使用 refresh() 方法刷新控件，才能应用更改。
刷新日期选择器不会清空选中日期，因此在更改选项后最好使用 setOptions() 来清空选中日期。