javascript - 添加日期选择器 Jquery

Question

不确定我做错了什么。我在页面加载时添加我的日期选择器类。

 $(function()
 {
      $( ".datepicker" ).datepicker({changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd", yearRange: "2002:"});
 });

我想将我的日期选择器类更改为

   $( ".datepicker" ).datepicker({changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd", yearRange: "2010:"});

一旦发生事件，我会删除该类，然后取消绑定(bind)日期选择器，然后重新绑定(bind)。

    $("#datefield").removeClass("datepicker hasDatepicker");
    $('#datefield').unbind();
    $('#datefield').bind();

    //rebind
    $("#datefield").datepicker();

如何重新绑定(bind)新的日期选择器？我删除了 datepicker 类，然后重新添加了该类。似乎没有任何作用。

Answer 1

您只需存储已初始化日期选择器的元素，然后使用其自己的 API 更新其选项:

$(function() {
  var $dateField = $("#datefield").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "yy-mm-dd",
    yearRange: "2002:"
  });
  
  $('button').on('click', function() {
    $dateField.datepicker("option", { yearRange: "2010:" });
    console.log('Updated. Try opening datepicker again now');
  });
});

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

<p>Date: <input type="text" id="datefield"></p>
<button type="button">Update year range to <code>2010:</code></button>