Adding datepicker Jquery

Question

Not sure what I am doing incorrectly. I add my datepicker class when the page loads.

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

I want to change my datepicker class to

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

On event I remove the class then unbind the datepicker, then rebind.

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

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

how can I rebind the new datepicker? I've removed the datepicker class then re-added the class. Nothing seems to work.

I think I've got it correct. $("#datefield").datepicker({changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd", yearRange: "1998:"});. How can I add this using a class? — user3525290
– user3525290, Commented May 2, 2018 at 11:14

Terry · Accepted Answer · 2018-05-02 11:41:25Z

1

You simply have to store the element that you have initialized datepicker on, and then update its options using its own API thereafter:

$(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>

answered May 2, 2018 at 11:41

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3525290 Over a year ago

Thanks, didn't think about that.

Collectives™ on Stack Overflow

Adding datepicker Jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related