主页 / coding / 问题 / 79183812
Accepted
Zenin0
Asked: 2024-11-13 15:34:15 +0800 CST

如何按时间段禁用一周中的某几天？

  • 772

我目前正在尝试添加日期选择器 ( Boostrap datepicker ) 并禁用一周中的某些日子 (例如星期一)，以防止在办公室关闭的日子进行预订。我找到了该daysOfWeekDisabled参数，它运行良好，但并非专门用于此目的：

$('#date_return').datepicker({
    language: "es",
    format: 'dd/mm/yyyy',
    autoclose: true,
    todayHighlight: true,
    showMeridian: false,
    startView: 2,
    minView: 2,
    maxView: 1,
    pickerPosition: "bottom-left",
    daysOfWeekDisabled: $scope.daysClosedInLocationOfReturn
});

此设置按预期工作，但现在我需要使其适用于特定时期。例如，从 2024 年 12 月 31 日至 2025 年 12 月 30 日，然后是另一个时期，从 2025 年 12 月 31 日至 2026 年 12 月 30 日。此外，日期可能会根据时期而变化。

我也在网上搜索并找到了希望能解决我的问题的方法：

isInvalidDate: function(date) {
    return date.day() === 0 || date.day() === 6;
}

有了这项功能，我想我可以添加更多条件来检查其他标准，例如特定年份或其他条件。但是，它并没有按预期工作 - 它既没有禁用星期几，也没有显示任何错误消息。有什么方法可以阻止特定时间段内的特定日子吗？

javascript

1 个回答

  1. Best Answer

    不确定您是否可以使用当前日期选择器隐藏特定时期。

    但是您可以使用Bootstrap Datepicker来实现

    有了它，您可以使用beforeShownDay选项来实现您的自定义逻辑。

    例子：

    $('#date_return').datepicker({
   language: "es",
   format: 'dd/mm/yyyy',
   autoclose: true,
   todayHighlight: true,
   pickerPosition: "bottom-left",
   beforeShowDay: function(date) {
       var day = date.getDay(); // 0 (Sunday) ... 6 (Saturday)

       // The periods with the days to disable
       var periods = [
           {
               start: new Date(2024, 11, 31),
               end: new Date(2025, 11, 30),
               daysToDisable: [1] // Mondays
           },
           {
               start: new Date(2025, 11, 31),
               end: new Date(2026, 11, 30),
               daysToDisable: [2, 3] // Tuesdays and Wednesdays
           }
       ];

       for (var i = 0; i < periods.length; i++) {
           var period = periods[i];
           if (date >= period.start && date <= period.end) {
               if (period.daysToDisable.includes(day)) {
                   return false; // Disable this specific date
               }
           }
       }
       return true; // Enable all other dates
   }
});
    • 2

相关问题