在网页开发中，日期选择器是一个常见的组件。jQuery UI Datepicker 是一个功能强大、易于使用的日期选择器插件，在许多项目中被广泛使用。但是，在某些情况下，我们可能需要禁用一些特定的日期，例如周末或假日。本文将介绍如何使用 jQuery UI Datepicker 禁用周六和周日。
步骤 1：引入 jQuery UI 和相关文件
在开始之前，确保已经引入了 jQuery 和 jQuery UI 插件，并且已经添加了相关的 CSS 和 JavaScript 文件。如果你还没有引入它们，请按照以下步骤进行：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- -- ---------- --------------- ----- ---------------- ------------------------------------------------------------- ------- ----------------------------------------------------------- ------- ------------------------------------------------------------------ ------- ------ ------ ----------- ---------------- ------- -------
步骤 2：创建日期选择器并设置禁用日期
接下来，我们可以通过调用 .datepicker() 方法来创建一个日期选择器，并使用 beforeShowDay 选项来设置禁用日期。beforeShowDay 选项是一个回调函数，它将在每个日期显示之前被调用，并根据需要返回一个数组。
$(function() {
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 0 && day != 6)];
}
});
});在上面的代码中，我们首先使用 .datepicker() 方法创建了一个日期选择器，并且通过 beforeShowDay 选项指定了一个回调函数。该函数接受一个日期对象作为参数，并返回一个数组来指示是否启用或禁用特定的日期。在这里，我们使用 getDay() 方法获取日期的星期几，并检查它是否等于 0 或 6，即周六或周日。如果是，则返回一个数组 [false]，表示该日期被禁用。
步骤 3：测试效果
现在你可以在页面上测试你的代码了。当你单击文本框时，日期选择器应该弹出。你会发现，周六和周日的日期已被禁用，无法选择。
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -- ---------- ---------------
----- ---------------- -------------------------------------------------------------
------- -----------------------------------------------------------
------- ------------------------------------------------------------------
-------
------
------ ----------- ----------------
--------
------------ -
-----------------------------
-------------- -------------- -
--- --- - --------------
------ ----- -- - -- --- -- ----
-
---
---
---------
-------
-------总结
使用 jQuery UI Datepicker 禁用周六和周日非常简单。只需要在创建日期选择器时，使用 beforeShowDay 选项来指定一个回调函数，并返回一个数组来禁用特定的日期即可。
这种技术也可以扩展到其他情况，例如禁用节假日或特定日期范围等。希望这篇文章对你有所帮助，能够提高你在前端开发中的
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9305
