Как изменить mindate и maxdate jquery datepicker из выбранной опции

Question

есть решение изменить даты (mindate и maxdate) в скрипте jquery, из вариантов выбора? Спасибо за вашу помощь

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="js/datepicker-en.js"></script>
<script>
  jQuery(document).ready(function($) {
    $("#datepicker1").each(function() {
      $(this).datepicker({
        autoclose: true,
        minDate: new Date(2019, 03 - 1, 25), 
        maxDate: new Date(2019, 04 - 1, 25),
      });
    });
  });
</script>

Значения, которые нужно добавить или изменить с помощью опций выбора (опция по умолчанию пуста, без какого-либо диапазона дат):

minDate: new Date(2019, 03 - 1, 25), 
maxDate: new Date(2019, 04 - 1, 25),

Пример выбора:

<select id="minmaxdate">
  <option value="">No date range</option>
  <option value="mindate 2019/01/25 maxdate 2019/04/25">from 2019/01/25 to 2019/04/25</option>
  <option value="mindate 2019/05/15 maxdate 2019/07/05">from 2019/05/15 to 2019/07/05</option>
  <option value="mindate 2019/09/18 maxdate 2019/04/25">from 2019/09/18 to 2019/04/25</option>
</select>

Answer 1

Для этого вы можете разместить минимальные / максимальные даты в атрибутах data на элементах option. Затем при возникновении события change на select можно обновить параметры minDate и maxDate на элементе управления DatePicker до новых значений.

Также обратите внимание, что вы вызываете each() для селектора id, который является избыточным, поскольку атрибуты id должны быть уникальными в DOM.

jQuery(function($) {
  $('#minmaxdate').change(function() {
    var $selected = $(this).find('option:selected');
    $('#datepicker1').datepicker('option', {
      minDate: new Date($selected.data('min')),
      maxDate: new Date($selected.data('max'))
    });
  });

  $("#datepicker1").datepicker({
    autoclose: true,
    minDate: new Date(2019, 2, 25),
    maxDate: new Date(2019, 3, 25),
  });
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

<select id="minmaxdate">
  <option data-min="03-25-2019" data-maxdate="04-25-2019">No date range</option>
  <option data-min="01-25-2019" data-maxdate="04-25-2019">from 2019/01/25 to 2019/04/25</option>
  <option data-min="05-15-2019" data-maxdate="07-05-2019">from 2019/05/15 to 2019/07/05</option>
  <option data-min="09-18-2018" data-maxdate="04-25-2019">from 2018/09/18 to 2019/04/25</option>
</select>

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