Question

有一种解决方案，可以从选择选项更改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事件时，您可以将datepicker控件上的minDate和maxDate选项更新为新值。

还要注意，您正在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" />

如何从选择选项更改mindate和maxdate jquery datepicker

1 个答案: