javascript - 如何在多个 jQueryUI 日期选择器中遮盖特定日期

Question

我想在单个页面上的四个不同的 JQuery 日期选择器上屏蔽特定日期(例如 2015 年 5 月 20 日到 2015 年 5 月 25 日)。解决这个问题最简单的方法(轻量级)是什么？

HTML

<label>Date Picker 1</label><input type="text" id="datepicker" name="Datepicker" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">

<label>Date Picker 2</label><input type="text" id="datepicker22" name="Datepicker2" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">

<label>Date Picker 3</label><input type="text" id="datepicker3" name="Datepicker3" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">

<label>Date Picker 4</label><input type="text" id="datepicker4" name="Datepicker4" style="border-radius:5px; font-family: sans-serif; color:#333; font-size:14px; margin-bottom:5px;">

jQuery

<script>
$(function() {
$( "#datepicker" ).datepicker({
        minDate:3,
        maxDate:180,
        dateFormat:"DD, d MM, yy",
        changeMonth:true,
        showButtonPanel:true
    });
});
 $(function() {
$( "#datepicker2" ).datepicker({
        minDate:3,
        maxDate:180,
        dateFormat:"DD, d MM, yy",
        changeMonth:true,
        showButtonPanel:true
    });
});
 $(function() {
$( "#datepicker3" ).datepicker({
        minDate:3,
        maxDate:180,
        dateFormat:"DD, d MM, yy",
        changeMonth:true,
        showButtonPanel:true
    });
});
 $(function() {
$( "#datepicker4" ).datepicker({
        minDate:8,
        maxDate:180,
        dateFormat:"DD, d MM, yy",
        changeMonth:true,
        showButtonPanel:true
    });
});
 </script>

原始日期选择器的代码在这里:https://jqueryui.com/datepicker/

Answer 1

这里是一个关于如何使用 @charlietfl 和 @Emm 提供的有用注释的示例。 fiddle 可以找到 here

但基本上你保留 HTML 标记，然后为 javascript 做:

var unavailableDates = ["20-5-2015", "21-5-2015", "22-5-2015", "23-5-2015", "24-5-2015", "25-5-2015"];

function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    if ($.inArray(dmy, unavailableDates) < 0) {
        return [true, "", "Book Now"];
    } else {
        return [false, "", "Booked Out"];
    }
}

$(function () {
    $("#datepicker, #datepicker2, #datepicker3, #datepicker4").datepicker({
        minDate: 3,
        maxDate: 180,
        dateFormat: "DD, d MM, yy",
        changeMonth: true,
        beforeShowDay: unavailable,
        showButtonPanel: true
    });
});