Question

I’m having a problem getting the jquery ui datepicker to show up on a dynamically added element inside a jquery ui selectable but only in Firefox.

Once one of the selectables is selected, a dynamically created input is created and appended to the selectable. That input is assigned as a datepicker before being added to the dom dynamically.

I’ve created a jsfiddle with the example of my problem… it runs fine in Chrome but Firefox doesn’t like it. By “doesn’t like it” I mean that the datepicker won’t show up when clicking on the input after selecting one of the selectable titles.

Here is the raw javascript for the jsfiddle I’ve linked to above:

$(document).ready(function(){
    $('.selectable').selectable({
        filter: 'li',
        cancel: 'input',
        stop: function(e, ui){
            var li = $(this).find('li');

            if (li.length > 0){
                $(li).each(function(){
                    if ($(this).hasClass('ui-selected')){
                        if ($(this).find('.start_date').length == 0){
                            var datepicker = $('<input/>').prop({'readonly': true}).datepicker({ minDate: 1 });

                            $('<div/>').attr({'class': 'start_date subtitle'})
                                .append($('<label/>').css({'display': 'inline-block'}).text('Start Date:'))
                                .append(datepicker)
                                .appendTo(this)
                        }
                    } else {
                        $(this).find('.start_date').remove();
                    }
                });
            } else {
                $(this).find('li div.start_date').remove();
            }
        }
    }).disableSelection();
});

Thanks

Answer 1

I think the problem is that the selectable behaviour is swallowing the mouse events for its children, which prevents the date picker from showing. Try adding an explicit click handler to display the picker:

var datepicker = $('<input/>')
    .prop({'readonly': true})
    .datepicker({ minDate: 1 })
    .click(function(){ $(this).datepicker("show"); });