如何在 daterangepicker JS 和 Laravel 中禁用占用的日期

Posted 2023-03-14

【中文标题】如何在 daterangepicker JS 和 Laravel 中禁用占用的日期

【英文标题】：How to disable occupied dates in daterangepicker JS and Laravel

【发布时间】：2018-08-14 06:46:18

【问题描述】：

我正在尝试实施度假村预订，我可以使用bootstrap daterangepicker 检查特定日期是否仍然可用，但我不知道如何执行此操作。我得到了this thread，但它没有使用daterangepicker。

注意：我也在使用 laravel5.1，所以也许这可以解决问题。

数据库字段

idnamePlacestart_timeend_time

使用 daterangepicker 设置我的 JS 代码

$(function () 
    $('.time').daterangepicker(
        "minDate": moment(' date('Y-m-d G') '),
        "timePicker": true,
        "showDropdowns": true,
        "timePicker24Hour": false,
        "timePickerIncrement": 5,
        "autoApply": true,
        "locale": 
            "format": "MM/DD/YYYY hh:mm:ss A",
            "separator": " — ",
        
    );
);

【问题讨论】：

我不能使用 cmets 所以我写在这里。你可以在这里查看：***.com/questions/40670141/…

但那是具体日期，不是日期范围

【参考方案1】：

假设您有一个start_date 和一个end_date。

$(function() 
    var start_date = '2018-3-1';
    var end_date = '2018-3-10';
    $('input[name="daterange"]').daterangepicker(
      "minDate": moment('2018-1-1'),
      "timePicker": true,
      "showDropdowns": true,
      "timePicker24Hour": false,
      "timePickerIncrement": 5,
      "autoApply": true,
      "locale": 
        "format": "MM/DD/YYYY hh:mm:ss A",
        "separator": " — ",
      ,
      "isInvalidDate": function (date) 
        var is_valid = true;
        @foreach($dates as $date)
          if(moment(date).isBetween($date->start_date, $date->end_date, 'day', '[]'))
            is_valid = false;
          
        @endforeach
        return is_valid;
      
    );
  );

那么你不能在 start_date 和 end_date 之间选择日期。

【讨论】：

这会很棒。我会试试看。但是，如果我有很多 start_date 和 end_data 由于预订了很多客户怎么办？ （请添加时间，而不仅仅是日期）

@Jonjie 你可以添加一个for循环来检查日期是否在start_date和end_date之间。但是我觉得这个插件本来就不支持检查时间验证。

嗨，pktanyue。您能否将其更新为您的答案，以便我进行评估和测试？

@Jonjie 你现在有什么变量？

我的控制器（在 Laravel 中）有 $dates 变量，它返回 datetime (start_date, end_date) 的 json。

【参考方案2】：

理想情况下，您希望在创建 daterangepicker 的新实例时使用 isInvalidDate 配置选项。

isInvalidDate

var disabledDates =  $disabledDates->toJson(); ;

$(function () 
    $('.time').daterangepicker(
        "minDate": moment(' date('Y-m-d G') '),
        "timePicker": true,
        "showDropdowns": true,
        "timePicker24Hour": false,
        "timePickerIncrement": 5,
        "autoApply": true,
        "locale": 
            "format": "MM/DD/YYYY hh:mm:ss A",
            "separator": " — ",
        ,
        "isInvalidDate": function (date) 
            return disabledDates.indexOf(date) != -1;
        
    );
);

在这种情况下，$disabledDates php 变量被假定为禁用日期的集合，所有日期都是字符串格式。

【讨论】：

嗨奥利瑞德。如果我只有 2 个可用日期怎么办？ start_date 和 end_date?

@Jonjie 然后你可以交换它，所以disabledDates 是enabledDates 并让函数返回disabledDates.indexOf(date) == -1。除非你的意思是一个范围？