DaterangePicker不可点击的旧日期

Question

我正在使用此 JavaScript组件选择日期范围，并且UI中存在问题。

正如您在图像中看到的，您可以在左侧日历中选择任何日期，而我想做的就是酒店预订系统。 右边的日历可以完美地工作，而左边的日历则不能。 如何停用旧日期或使其无法点击？ 为此有黑客吗？

HTML：

<input type="text" name="reservation" id="reservation" class="input-daterange form-control pull-right active">

初始化代码：

$('.input-daterange').daterangepicker({
      "opens": "right"
});

在我的php文件中，我可以使用以下命令进行验证：

$reservation = explode("-", \Request::input('reservation'));
$from        = date('Y-m-d', strtotime($reservation[0]));
$to          = date('Y-m-d', strtotime($reservation[1]));

$now  = new DateTime("today");
$day1 = new DateTime($from);
$day2 = new DateTime($to);
$diff = date_diff($day1, $day2, true);
$days = $diff->format('%a');

if ($day1 > $day2 || $day1 < $now || $days == 0) {
    echo "invalid";
}

但是，如果我想直接在UI中执行该操作怎么办？

Answer 1

下面的代码可能有效，请尝试以下操作：

 var todayDate = new Date();
 var todayMin = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate(), 0, 0, 0, 0);
 $('.input-daterange').daterangepicker({
    "opens": "right",
    "minDate": todayMin
 });

Answer 2

您必须执行以下代码：-

  $(function() {
    $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate: 0", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });

它将生成一个受限制的日期范围。

$(".input-daterange").datepicker({dateFormat:'mm/dd/yy', minDate: new Date(2010,11,12) });

您也可以尝试一下。