Daterangepicker недоступная для клика старая дата

Я использую этот компонент JavaScript для выбора диапазонов дат, и у меня возникла проблема с пользовательским интерфейсом.

введите здесь описание изображения

Как вы можете видеть на изображении, вы можете выбрать любую дату в левом календаре, и то, что я пытаюсь сделать, это система бронирования отелей. Правый календарь работает отлично, а левый нет. Как деактивировать или сделать старые даты некликабельными? Есть ли хак для этого?

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";
}

Но что, если я хочу сделать это прямо в пользовательском интерфейсе?


javascript daterangepicker
person wobsoriano    schedule 29.10.2015    source источник
comment
Вы используете bootstrap datetimepicker?   -  person K.D    schedule 29.10.2015
comment
@K.D, О, я не знаю, но я предоставил компонент javascript, который использую в посте.   -  person wobsoriano    schedule 29.10.2015
comment
Можете ли вы опубликовать свой код инициализации datetimepicker на свой вопрос?   -  person K.D    schedule 29.10.2015
comment
@KD Конечно, обновил свой пост.   -  person wobsoriano    schedule 29.10.2015

Ответы (2)


arrow_upward
1
arrow_downward

Ниже код может работать, попробуйте следующее:

 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
 });
person K.D    schedule 29.10.2015

arrow_upward
1
arrow_downward

Вы должны сделать, как показано ниже: -

  $(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) });

вы также можете попробовать это.

person Nilesh Chourasia    schedule 29.10.2015