I have two date fields in my form and notice that the date popup is not working for me.

I have read some issues regarding Internet Explorer, however I am using OSX and Chrome.

No console errors are showing and I am using jQuery Update running version 1.8

Comments

MrPaulDriver created an issue. See original summary.

danchadwick’s picture

danchadwick commented
Category: Bug report » Support request

Works fine without jQuery Update. Try disabling that. If that is indeed your the cause of your issue and offer a patch offering both supported and updated version support for jQuery, I'd be happy to review it.

Alas, jQuery has a lovely habit of making incompatible changes in point releases.

mrpauldriver’s picture

mrpauldriver commented

Thanks Dan.

After a bit more digging, it turns out that jQuery update is not the problem but the Chosen module instead. In realty the date picker is working, but it is not updating UI of the selectors when the Chosen module is enabled.

This thread gave some clues and I was able to circumvent the problem by inserting the code below in the config pages for the Chosen module.

select:not(.webform-component-date .form-select)

mrpauldriver’s picture

mrpauldriver commented
Title: Date popup not working » Date popup not working because of conflict with Chosen module
Status: Active » Closed (fixed)
jebeze_alexander’s picture

jebeze_alexander commented

I know that this has been identified as fixed, but I have encountered the same error, but do not have the ability to easily update config. I found that it is possible to use jQuery to force an update of Chosen fields when the date picker is used. I added this as markup using the "embed code" text format. Unfortunately, there are a few additional challenges to make this happen, so not just a simple line of code. 

<script>
//execute after jQuery and Chosen have loaded
document.addEventListener("DOMContentLoaded", function () { 

    function updateCal() {
        $("a.ui-state-default").click(function(){
            //when user clicks on a date, but only works if execution delayed
            //calls the chosen API
            setTimeout("$('select').chosen().trigger('chosen:updated')",300)
        })
        $("a.ui-corner-all").click(function(){
            //when user clicks on prev/next month buttons, event handler needs to be re-registered
            updateCal()
        })
    }

    $$("input.webform-calendar").click(function(){
        //register event handler when calendar icon is clicked, because not available in DOM until then
        updateCal()
    })

});
</script>