如何为jQuery Datepicker添加节假日等禁用日期？

算力阿峰

2026-7-6

解决jQuery Datepicker禁用特定日期的问题

你可以通过扩展beforeShowDay回调函数，同时实现禁用周日和自定义特定日期。以下是修改后的完整代码：

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<div style="width:100%; clear:both; margin: 10px 0;">
    <p>
        <label for="date">CHOOSE A DELIVERY/PICKUP DATE:</label>
        <input readonly="readonly" id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    </p>
</div>

<script>  
window.onload = function() {
    if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
            // 定义需要禁用的特定日期，格式为 yyyy-mm-dd
            const disabledDates = [
                "2024-10-01",
                "2024-10-05",
                "2024-12-25"
            ];

            $("#date").datepicker({
                minDate: +2,
                maxDate: '+6M',
                beforeShowDay: function(date) {
                    // 先判断是否为周日
                    if (date.getDay() === 0) {
                        return [false, "", ""];
                    }
                    // 将当前日期转换为 yyyy-mm-dd 格式，与禁用数组匹配
                    const formattedDate = `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
                    // 判断是否在禁用日期列表中
                    const isDateDisabled = disabledDates.includes(formattedDate);
                    return [!isDateDisabled, "", ""];
                },
                dateFormat: "dd/mm/yy"  
            });
        });
    }
}
</script>