在 Bootstrap DatePicker 中启用/禁用日期范围

Posted 2023-05-08

【中文标题】在 Bootstrap DatePicker 中启用/禁用日期范围

【英文标题】：Enable/Disable Date Range in Bootstrap DatePicker

【发布时间】：2018-06-15 05:25:20

【问题描述】：

我的要求是我只希望在从今天到下一个 72 小时的范围内启用日期。

我已将示例链接中的代码实现为https://codepen.io/ahmetcadirci25/pen/NpMNzJ

在此链接中，回溯日期设置为禁用，这很好，但包括我还希望从今天到下一个 72 小时（2 天以上）的日期应该启用，并且毕竟日期是禁用的。

我试过的代码是

jQuery

var date = new Date();
date.setDate(date.getDate());

$('.date').datepicker( 
    startDate: date
);

html

<input class="date" data-provide="datepicker">

上面链接中设置的一些引导链接

FOR EXP ：如果今天日期是 01/05/2018(MM/dd/yyyy) 在这种情况下，我希望启用红色突出显示的日期，即 05,06,07 启用其他所有应该禁用

【问题讨论】：

你应该使用 minDate : 0（今天）和 maxDate: +3D

【参考方案1】：

您可以definestart 和end 日期为datepicker。喜欢

$('#dateTimeinput').datepicker(

    startDate : todayDate,
    endDate : maxDate,
);

演示 fiddle

【讨论】：

如果我有多个日期范围，我们可以这样做吗？ ***.com/questions/61762635/…

【参考方案2】：

您可以为此使用 beforeShowDay。这是一个例子。

$(function()
    $("input").datepicker(
        
        beforeShowDay: function (date) 
            var today= new Date();

            var afterTwoDays = new Date();
            afterTwoDays.setDate(today.getDate() + 2);

            //Now return the enabled and disabled dates to datepicker
            return [(date.getDate() >= today.getDate() && date.getDate() <= afterTwoDays.getDate()), ''];
        
    );
);

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" name="foo" />