jQuery live() failing with jQuery UI datepicker

Ok, I'm trying to use the FaceBox() plugin for jQuery along with the jQuery UI datepicker().

I've got it to bind to the lightbox'd inputs on the first appearance of the lightbox, but it's not working afterwards.

I'm doing the following:

$(function() { 
    $('.jQueryCalendar').live('click', function () {
            $(this).datepicker({showOn: 'both'}).focus();
    });
});

When the lightbox closes, I'm re-appending it's content to the page (in order to not lose the content div), and this seems to be killing the live() call. [NB the re-appending takes place after the original content is destroyed]

EDIT

Ok, the live() event IS firing (thanks to Nick Craver for that), however the datepicker is no longer being shown. Does anyone have an idea why?

EDIT #2

Ok, the use of .html() to re-append causes the events to need rebinding, but the element to bind still has the class hasDatepicker, which messes with the datepicker() initialisation.

To fix, simply user

$(this).removeClass('hasDatepicker') .datepicker({showOn: 'both'}).focus();

Try this and see what happens:

$(function() { 
    $('.jQueryCalendar').live('click', function () {
            $(this).datepicker('destroy').datepicker({showOn: 'both'}).focus();
    });
});

If you're using jQuery UI 1.7.2 with jquery 1.4, some effects destroy widgets, it fading, etc may be causing datepicker issues. jQuery UI 1.8 fixes this, it's at RC3 Status at the moment.

$(this).removeClass('hasDatepicker') .datepicker({showOn: 'both'}).focus();

solved my issue

thanks!

this worked for me

$.datepicker.setDefaults({ dateFormat: 'yy-mm-dd', ... });
$('input.date').live('focus', function() {
 $(this).datepicker().datepicker('show');
 true;
});

This worked for me:

$('.datepicker').live('mousedown', function(){
  $(this).datepicker({
    dateFormat: 'mm/dd/y
  });
});

Not how ever that .live() has been removed from jQuery as of 1.9 and should be replaced by .on(). Using the new syntax you would get:

$(document).on('mousedown', '.datepicker', function(){
  $(this).datepicker({
    dateFormat: 'mm/dd/y
  });
});

its possible that the datepicker is behind the box...

i had also the same problem a time ago.

put this in a css file, and that did the trick for me.

#ui-datepicker-div
{
    z-index:9999999;
}

$( "#datepicker" ).live('mousedown',function()
{
$(this).datepicker({ 
dateFormat: 'dd/mm/yy',
minDate: 0
});     
});

Try this ..

I had the same issue but the problem was, I had many 'tiles' with start and end dates. I wasnt getting the results I needed because the id for each start date was the same, as well as the end date. Also with multiple date fields, I was getting the datePickers returned values all set to the first instance of a date field.

This code worked for me:

[IN HTML]

<label for="display_date">Display/Start Date</label><br />

<input type="text" class="dateStart" name="display_date" value="" /><br />

<label for="display_date_end">End Date</label><br />

<input type="text" class="dateEnd" name="display_date_end" value="" /><br />

[IN JAVASCRIPT INCLUDE]

// set the datePicker on the start and end fields

$('input.dateStart').datepicker({dateFormat:"yy-mm-dd", changeYear: true});

$('input.dateEnd').datepicker({

dateFormat:"yy-mm-dd",

changeYear: true,

beforeShow: function(){

var value = $(this).siblings('.dateStart').val();

$(this).datepicker('option', 'minDate', value);

}

});

I hope this helps someone else with the same issues!

bo huttinger

You can try to use .livequery plugin

$('.jQueryCalendar').livequery(function() {

    // This will fire for each matched element.
    // It will also fire for any new elements added to the DOM.
    $(this).datepicker(options);
});

i found the answer here