Добавление DatePicker Jquery

Question

Не уверен, что я делаю неправильно. Я добавляю свой класс DatePicker, когда страница загружается.

 $(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:"});

При событии я удаляю класс, затем отменяю привязку даты и снова связываюсь.

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

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

как мне перепривязать новый указатель даты? Я удалил класс 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>