jQuery UI 是一个广泛使用的前端 JavaScript 库。它提供了一系列强大而易于使用的用户界面组件，其中包括日历/日期选择器。默认情况下，该组件以“日”模式显示日期，但有时需要以“周”模式显示日期，特别是在与周相关的任务和项目中。本文将介绍如何在 jQuery UI 日历/日期选择器中使用“周”模式。
步骤
第 1 步：导入 jQuery UI 库和样式表
你需要将 jQuery UI 库和样式表引入到你的 HTML 文件中。可以通过以下方式进行引用：
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.12.4.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
第 2 步：配置 datepicker 选项
接下来，你需要将 datepicker 的选项设置为适当的配置。具体来说，你需要设置 dateFormat 选项为 "yy-W"，这样它就会以“周”模式显示日期。
$(function() {
$("#datepicker").datepicker({
dateFormat: "yy-W",
});
});第 3 步：使用 datepicker 控件
现在，你可以在 HTML 中使用 datepicker 控件了。你可以在输入框中输入日期，并使用键盘上的箭头键选择下一个或上一个周。例如：
<label for="datepicker">选择日期：</label> <input type="text" id="datepicker">
完成后，你就可以在网页上看到一个带有日历和日期选择器的输入框，以“周”模式显示日期。用户可以通过键盘或鼠标轻松选择所需日期。
总结
通过上述步骤，你可以轻松地在 jQuery UI 日历/日期选择器中启用“周”模式。这对于与周相关的任务和项目非常有用。
示例代码如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- -- ---------- - ---- --------------
----- ---------------- -------------------------------------------------------------
------- --------------------------------------------------
------- --------------------------------------------------------
--------
------------ -
-----------------------------
----------- -------
---
---
---------
-------
------
------ ------------------------------
------ ----------- ----------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30519