Невозможно установить как minDate, так и maxDate в eonasdan datetimepicker - PullRequest
Новая
       62

Невозможно установить как minDate, так и maxDate в eonasdan datetimepicker

0 голосов
/ 04 мая 2018

У меня есть eventStartDate и eventEndDate.

Когда выбрана дата начала, я хочу установить минимальную и максимальную даты для даты окончания.

Ниже работает код, с одной причудой:

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

  $('#start_date_picker').on('dp.change', function () {

    let eventStartDate = moment($('#start_date').val(), 'DD/MM/YYYY');
    let minEventEndDate = eventStartDate.clone().add(1, 'days');
    let maxEventEndDate = eventStartDate.clone().add(30, 'days');

    $('#end_date_picker').data("DateTimePicker").clear();
    $('#end_date_picker').data("DateTimePicker").maxDate(maxEventEndDate);
    $('#end_date_picker').data("DateTimePicker").minDate(minEventEndDate);
});

1 Ответ

0 голосов
/ 04 мая 2018

Полагаю, в HTML нет элемента #start_date.

Если вы хотите установить end_date_picker minDate и maxDate после выбора даты в #start_date_picker, вы можете использовать переменную, которую dp.change() прошло. 

e = {
    date, //date the picker changed to. Type: moment object (clone)
    oldDate //previous date. Type: moment object (clone) or false in the event of a null 
}


$(function () {
  $('#start_date_picker').datetimepicker();
  $('#end_date_picker').datetimepicker();
});

$('#start_date_picker').on('dp.change', function (e) {

    let eventStartDate = moment(e.date, 'DD/MM/YYYY');
    let minEventEndDate = eventStartDate.clone().add(1, 'days').startOf('day');
    let maxEventEndDate = eventStartDate.clone().add(30, 'days').endOf('day');

    $('#end_date_picker').data("DateTimePicker").clear();
    $('#end_date_picker').data("DateTimePicker").maxDate(maxEventEndDate);
    $('#end_date_picker').data("DateTimePicker").minDate(minEventEndDate);
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class='input-group date' id='start_date_picker'>
  <input type='text' class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

<div class='input-group date' id='end_date_picker'>
  <input type='text' class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>
...