Сегодняшняя дата или уже выбранная дата на предыдущем входе не может выбрать

Question

Я использую Daterangepicker для нашего приложения.

Создание многопоточного компонента выбора даты (3 поля ввода)

1. TripOne - Выберите дату (например, 19 февраля)
2. TripTwo - должен начинаться с выбранной даты "TripOne".
3. TripThree - должен начинаться с выбранной даты "TripTwo".

Выше все работает нормально.

Но, ниже проблема не работает над этим плагином.

1. TripOne - выберите дату сегодня (не работает)
2. TripTwo - Если выбрано 20 февраля в TripOne, я не смогу выбрать такое же 20 февраля в TripTwo.
3. TripThree - аналогично TripTwo.

JS:

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var maxLimitDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate()+360, 0, 0, 0, 0);

$('input[name="tripOne"]').daterangepicker({
    "autoApply": true,
    "autoUpdateInput": false,
    "singleDatePicker": true,
    "minDate": today,
    "maxDate": maxLimitDate,
    "locale": {
        format: 'DD MMM YYYY'
    }
    },function(start) {
      $("#tripOne").val(start.format('DD MMM YYYY'));
      $('#tripOne').parent().parent().removeClass('has-error');
      var returnTripStartDate = new Date(Date.parse(start));
      $('input[name="tripTwo"]').daterangepicker({
        "autoApply": true,
        "autoUpdateInput": false,
        "singleDatePicker": true,
        "minDate": returnTripStartDate,
        "maxDate": maxLimitDate,
        "locale": {
            format: 'DD MMM YYYY'
        }
      },function(end) {
            $("#tripTwo").val(end.format('DD MMM YYYY'));
            $('#tripTwo').parent().parent().removeClass('has-error');
            var returnTripStartDate2 = new Date(Date.parse(start));
            $('input[name="tripThree"]').daterangepicker({
            "autoApply": true,
            "autoUpdateInput": false,
            "singleDatePicker": true,
            "minDate": returnTripStartDate2,
            "maxDate": maxLimitDate,
            "locale": {
                format: 'DD MMM YYYY'
            }
            },function(end) {
                $("#tripThree").val(end.format('DD MMM YYYY'));
                $('#tripThree').parent().parent().removeClass('has-error');
            });
            $(function() {
                $('.calendar.right').show();
            });
      });
      $(function() {
        $('.calendar.right').show();
      });
      $('input[name="tripOne"]').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('DD MMM YYYY'));
      });
      $('input[name="tripTwo"]').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('DD MMM YYYY'));
      });
      $('input[name="tripThree"]').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('DD MMM YYYY'));
      });
    });
    $(function() {
        $('.calendar.right').show();
    });

Просмотр страницы скрипки

Answer 1

Проблема не в самом сборщике даты... вы в том, как вы его используете. В вашем коде КАЖДЫЙ ВРЕМЯ, когда вы выбираете что-то из средства выбора даты поездки #1, оно пытается воздействовать на второе, которое пытается влиять на третье:(

Правильный подход: инициализируйте все 3 указателя даты в своем документе ready событие... но подождите: как вы будете изменять конфигурации каждого DatePicker в соответствии с вашей логикой?

Ну, это так же просто, как: Изменить параметр динамически в JQuery UI DatePicker не удается

Короче говоря, каждый раз, когда вы меняете значение в средстве выбора даты, меняйте следующие конфигурации средства выбора:

function(start) 
{
    $("#tripOne").val(start.format('DD MMM YYYY'));

    // .....

    $('input[name="tripTwo"]').datepicker("destroy");

    $("#dteEnd").datepicker({
     // new options here - with your desired value
    });

    // ......

Answer 2

Если вы используете средство выбора даты в следующем формате:

      $('yourInput').daterangepicker(
      (start, end, label) => {
         //business logic
      }

Затем измените его на следующий формат:

      $('yourInput').daterangepicker().on('apply.daterangepicker',function(ev,pickerr) {

}