Rendering glDatePicker to dynamically changed date

Question

I am using glDatePicker plugin.

To change dynamically selected date I call following code where dateDepartureVar is the constructor of glDatePicker object.

dateDepartureVar.options.selectedDate = new Date(2015, 9, 18);
dateDepartureVar.render();

This code changes the selectedDate however when the calendar is opened again, it does not open on the selectedDate, it opens wherever it was left off before.

I need the calendar to open exactly on selectedDate. What am I missing?

Answer 1

Please verify you have correctly obtained an instance of the datepicker when you initialized. here's an excerpt (slightly edited) from the official documentation :

When attaching your input, you can pass true to the second call to the glDatePicker constructor to get an instance of glDatePicker returned. You can also do this while chaining with options:

// Doing it in a single pass
var dateDepartureVar = $('#example1').glDatePicker(
{
  showAlways: true,
  selectableDOW: [0, 2, 3]
}).glDatePicker(true);  //Pass true here

More info here (official docs)

Answer 2

This worked for me.

The trick is set firstDate too.

$('select[name="monthSelect"]').change(function() {
    let newDate = new Date((new Date()).getFullYear(), parseInt($(this).val())-1, 1);

    $.extend(calendar.options, {
        selectedDate: newDate,
        firstDate: newDate
    });
    calendar.render();
});