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

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

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

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

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

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

  1. TripOne – выберите сегодняшнюю дату (не работает)
  2. TripTwo — если на TripOne выбрано 20 февраля, я не могу выбрать то же самое 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();
    });

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


jquery daterangepicker bootstrap-daterangepicker
person TDG    schedule 19.02.2017    source источник
comment
есть ли шанс, что у вас есть ошибки в консоли разработчика?   -  person ymz    schedule 19.02.2017
comment
Ошибок нет, босс.. единственное, что не хватает логики. Не удается повторно выбрать «уже выбранные даты» или «сегодняшняя дата» в следующем поле ввода.   -  person TDG    schedule 19.02.2017
comment
Это мой последний обновленный код. jsfiddle.net/jkenluv/z9tgdh7k/7   -  person TDG    schedule 19.02.2017

Ответы (1)


arrow_upward
0
arrow_downward

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

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

Ну, это так же просто, как: Динамическое изменение параметра в 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
    });

    // ......
person ymz    schedule 19.02.2017
comment
Привет. Я использую здесь .. плагин daterangepicker. Ожидаемое поведение и обновленный код jsfiddle.net/jkenluv/z9tgdh7k/7 - person TDG; 19.02.2017
comment
Извините .. меня смущает этот подход daterangepicker. Можно ли получить какую-нибудь страницу скрипки? Спасибо - person TDG; 19.02.2017