Как изменить дату выбора даты на основе первого выбора даты в JQuery

Question

у меня есть два средства выбора даты

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

, если первое средство выбора даты выбрало текущую дату, тогда должно быть

второй сборщик даты выберет после следующей даты, выбранной в сборщике даты - 1

<input type="text" id="datepicker"/>

<input type="text" id="datepicker2"/>
$(function() {
    $( "#datepicker1" ).datepicker({
    minDate:0,
    dateFormat: "yy-mm-dd" });

});

$(function() {
    $( "#datepicker2" ).datepicker({
    dateFormat: "yy-mm-dd" });

});

как я могу сделать в jquery ??

Datepicker - 1

Answer 1

Установите обработчик onSelect для первого средства выбора даты в обновлении обработчика minDate параметр второго средства выбора даты. Где использовать getDate метод для получения выбранного объекта Date.

$(function() {
  let $dt1 = $("#datepicker1").datepicker({
    minDate: 0,
    dateFormat: "yy-mm-dd",
    // attach handler
    onSelect: function(dateString, instance) {
      // update minDate option of second datepicker
      // create a Date instance using datepicker instance
      // where increment the day value
      // $dt2.datepicker('option', 'minDate', new Date(instance.selectedYear, instance.selectedMonth, ++instance.selectedDay));

      // or you can get Date from jQuery object
      // or get jquery instance from instance
      // like : instance.input or $("#datepicker1")

      let date = $dt1.datepicker('getDate');
      // or let date = instance.input.datepicker('getDate');

      // increment day
      date.setDate(date.getDate() + 1)

      $dt2.datepicker('option', 'minDate', date);
      // to set min date as datepickers 1 value simply use
      // $dt2.datepicker('option', 'minDate', dateString );

      // incrementing day from a customized data string is hard that's the reason for using datepicker instance
    }
  });

  // cache the reference of input element
  var $dt2 = $("#datepicker2").datepicker({
    dateFormat: "yy-mm-dd"
  });
});

<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<input type="text" id="datepicker1" />

<input type="text" id="datepicker2" />

Answer 2

Я бы также рассмотрел возможность отключения второго (зависимого) datepicker до тех пор, пока у первого не появится значение, которое улучшит отношения. Я добавил data-dependent, чтобы избежать жесткого кодирования, но это только выбор.

Здесь я использовал onSelect, но при желании это может быть другое событие.

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

$(function() {
  $("#datepicker").datepicker({
    minDate: 0,
    dateFormat: "yy-mm-dd",
    onSelect: function(date, datepicker) {
      let dependent= $(this).data('dependent');
      let thisDate = $(this).val();
      $(dependent).datepicker("option", "minDate", thisDate);
      $(dependent).datepicker('refresh');
    }
  });
  $("#datepicker2").datepicker({
    dateFormat: "yy-mm-dd"
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<input type="text" id="datepicker" data-dependent="#datepicker2" />
<input type="text" id="datepicker2" />

Answer 3

При выборе вашей первой даты просто установите -

$( "#datepicker2" ).datepicker({ minDate: <selected date from 1>});

например,

$( "#datepicker2" ).datepicker({ minDate: new Date('05/05/2019')}); это будет показывать даты только после 5 мая 2019

Answer 4

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

function reinitialize()
{
  $("#datepicker1").datepicker('destroy');
  $('#datepicker1').datepicker({
    onSelect: reinitialize,
    defaultDate: new Date($("#datepicker1").val())
  });
  $("#datepicker2").datepicker('destroy');
  $('#datepicker2').datepicker({
    minDate: new Date($("#datepicker1").val()), // use min date
    defaultDate: new Date($("#datepicker2").val())
  });
}