AUI Datepicker ignores options in the constructor

Ivana Navratilova

I'm trying to use the AUI Datepicker in my plugin. I am following this page in the documentation. Problem is, when I initialize the datepicker with

AJS.$(document).ready(<span>function() {</span>
   AJS.$(<span>'#demo-range-always'</span>).datePicker({<span>'overrideBrowserDefault'</span>: <span>true</span>});
});

it completely ignores the 'overrideBrowserDefault' option and still displays as false, no matter what I do. This actually prevents me from using other functions like getDate or setDate, which are normally exposed by the interface.

Even in the documentation page, if you go to browser console and try to get the options of the displayed demo datepicker, you get the wrong overrideBrowserDefault value - it is initialized with true, but it returns false.

$('#demo-range-always').datePicker().getOptions()

returns

{overrideBrowserDefault: false, firstDay: -1, languageCode: "en", dateFormat: "yy-mm-dd"}

while it is clearly initialized with the same code as it shows in the example. I tested it in Firefox and Chrome, both are broken in the same way. Is there something I am missing?

 

Daz

This question was also raised as an issue in the AUI issue backlog: https://ecosystem.atlassian.net/browse/AUI-4423

For posterity: the options will be reflected correctly if you first keep the reference to the constructed datepicker widget. 

var picker1 = AJS.$("#de-demo-date-picker").datePicker({
    overrideBrowserDefault: true,
    languageCode: "de"
});

var picker2 = AJS.$("#us-demo-date-picker").datePicker({
    overrideBrowserDefault: true,
    languageCode: "en-GB",
    firstDay: 0
});

console.log("initialized pickers options:");

console.log(picker1.getOptions());
// logs: {overrideBrowserDefault: true, firstDay: -1, languageCode: "de", dateFormat: "yy-mm-dd"}console.log(picker2.getOptions());
// logs: {overrideBrowserDefault: true, firstDay: 0, languageCode: "en-GB", dateFormat: "yy-mm-dd"}

 If you call the AJS.$(element).datePicker() function multiple times, you will end up with multiple date picker components appearing and disappearing when the element is interacted with.