How to change jQuery datepicker number of months d

Question

I'm asking this question because I couldn't find an answer in another one. If there is please link it to me.

I have a jQuery Datepicker on which I set the parameter numberOfMonths: 2

I want it to be 1 if the screenSize goes below some number (eg 768px). I tried:

$(window).resize(function(){
    if($(window).width() < 768){
        $('#datepicker').datepicker({
            numberOfMonths: 1
        })
    }
}

But since the datepicker is already initialised it does not work.

What can I do?

Answer 1

http://api.jqueryui.com/datepicker/#option-numberOfMonths

If the datepicker has already been initialized, you should use the options setters:

$( "#datepicker" ).datepicker( "option", "numberOfMonths", [ 2, 3 ] );

The parameter can also be a number, just like the way you initialize it. Check the link for more info.

Answer 2

You are on the right track, but there's enough things that could prove to be helpful that I wanted to post a full answer.

First, Here's a working Fiddle

Here's the code that I propose, with comments explaining each element:

// "No-conflict" jQuery document ready, to ensure doesn't collide with other libraries
jQuery(function($) {
  // The initial datepicker load
  $('#datepicker').datepicker({
    numberOfMonths: 3
  });

  // We're going to "debounce" the resize, to prevent the datePicker
  // from being called a thousand times.  This will help performance
  // and ensure the datepicker change is only called once (ideally)
  // when the resize is OVER
  var debounce;
  // Your window resize function
  $(window).resize(function() {
    // Clear the last timeout we set up.
    clearTimeout(debounce);
    // Your if statement
    if ($(window).width() < 768) {
      // Assign the debounce to a small timeout to "wait" until resize is over
      debounce = setTimeout(function() {
        // Here we're calling with the number of months you want - 1
        debounceDatepicker(1);
      }, 250);
    // Presumably you want it to go BACK to 2 or 3 months if big enough
    // So set up an "else" condition
    } else {
      debounce = setTimeout(function() {
        // Here we're calling with the number of months you want - 3?
        debounceDatepicker(3)
      }, 250);
    }
  // To be sure it's the right size on load, chain a "trigger" to the
  // window resize to cause the above code to run onload
  }).trigger('resize');

  // our function we call to resize the datepicker
  function debounceDatepicker(no) {
    $("#datepicker").datepicker("option", "numberOfMonths", no);
  }

});

If you're not familiar with the notion of "Debounce", see this article. The concept is that you prevent code from running on every single instance of an event. In this case, a resize of 500 pixels might trigger the "resize" event several hundred times, and if we did not "debounce", the datepicker function would get called several hundred times. Obviously we don't care about all the "interim" calls to datepicker, we really only care about the last one, which is triggered by the last resize event, which should reflect the ultimate size the user stopped at.