Showing the calendar programatically doesn't work

[kristiansp]

I'm trying to show the calendar programatically, but somehow it is not working. I've tried to narrow down what happens, and it all seems a little weird. It seems unable to remove the .qs-hidden class, even though it finds the right element, as far as I can see.

Looking in the developer tools in Google Chrome sees the class list of the container element flashing, but the class .qs-hidden stays.

I've tried to run the following code from a function tied to a button:

console.log('ClassList is ' + picker.calendarContainer.classList);
picker.calendarContainer.classList.remove('qs-hidden');
console.log('ClassList is ' + picker.calendarContainer.classList);

The output is:

ClassList is qs-datepicker-container qs-hidden
ClassList is qs-datepicker-container

So reading the actual DOM element, it claims the class is removed, but the calendar doesn't show, and looking in developer tools, the class is still there.

If I run the same code (or, for that matter, picker.show()) outside a function, right after initializing, it works, and the calendar will show.

I would kind of understand it if the picker instance weren't available in scope, but other functions in the same onclick works (for instance picker.setDate()), and it's able to read the properties of the actual element, but it's just not updating. I'm not sure if the class gets added right after being removed, or what is going on, but I just can't get this simple function to work.

Is this a bug, or do I need to call it in another way?

P.S. As I'm testing if it's right for me, I'm using the CDN version.

[kristiansp]

Digging a bit further, it seems the only elements I can even get Datepicker to work with are <input> and <button> as the anchor element – in Chrome, that is. In Safari, only an <input> element will open the calendar, even on the main element. Trying to instantiate Datepicker on a <div> won't work at all.

If I try to work around by triggering the event on the main anchor from another button, I also don't really get further. If I try to trigger the anchor element's .click() event, nothing happens. If I trigger .focus(), I get the onShow event firing, even though the calendar doesn't actually open (curiously enough, this also happens in Safari also with a <button> as anchor element, even though clicking the button itself doesn't open the calendar).

Looking in the dev tools of Safari when trying to trigger the normal .show() event, I can briefly see that the class qs-hidden gets removed, before something is flickering on the anchor element, and the class is added back.

[kristiansp]

Ok, one last thing that perhaps can help debugging. The only way I've so far managed to show the calendar programatically, triggered by another element than the anchor element, is to disable the calendar (not through options, that doesn't work, but by setting picker.disabled = true; in a function, and then manually removing the class qs-hidden from the element. Trying to enable the calendar afterwards resets the class.

So basically doing this, will at least show the calendar, in the wrong position and not active, but at least it's visible:

    function test() {
        picker.disabled = true;
        picker.calendarContainer.classList.remove('qs-hidden');
    }

Again, using .show() works when opening it in JavaScript right after creating the picker, but as soon as it's in a function, trying to open it immediately resets the class names hiding it again. And the function is called, and the element is found, as the .onShow() is triggered correctly.

[qodesmith]

When the calendar is attached to a non-input element, clicking that element should show the calendar. Looking through the code, apparently I missed this scenario! Locally I've added this logic to the event handler and it's working in Chrome and Safari. I'll push a new update in a bit.

[qodesmith]

@kristiansp Ok my friend, try the latest version - 5.0.3. The show and hide methods seem to be working as well. Let me know if there's still issues. I'll wait a bit before closing this issue.

[kristiansp]

@qodesmith Ah, thanks! Will test it out!

[qodesmith]

Going to close this issue. Let me know if there's still problems.