13

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();

Ed James
  • 10,385
  • 16
  • 71
  • 103
  • Stick an alert in there, I *think* you'll find that it's messing with the datepicker and the live is actually firing. – Nick Craver Mar 05 '10 at 12:55
  • hit the exact same issue today - 2 years later - and this worked for me. Thank you for coming back and taking the time to add what worked for you. – jeremy Jul 31 '12 at 23:17
  • You should post your solution as an answer and accept it! – Jeff Hines Jan 22 '13 at 20:41

8 Answers8

15

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.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • @Ed - In that case, is the lightbox fading, or re-sizing, any animation on close? – Nick Craver Mar 05 '10 at 13:12
  • yes, it fades out, however, this does not break any other datepickers (that are not in the lightbox) and I'm on jQuery 1.3.2 – Ed James Mar 05 '10 at 13:13
  • @Ed - Can you post the code where you're re-appending to the page? lightbox should be doing this by itself, maybe something's getting lost there. – Nick Craver Mar 05 '10 at 13:18
  • @Nick there's quite a lot of it, so check out my answer to http://stackoverflow.com/questions/2027290/facebox-adding-commas-to-input – Ed James Mar 05 '10 at 13:26
  • For future reference, the facebox lightbox is slightly dodgy when it comes to non-image content, so I'm using an almost completely re-written version now :) – Ed James Mar 05 '10 at 13:26
  • @Ed - I'm almost positive that .html() call is what's causing you issues, just pasting the code won't copy the widget data down. – Nick Craver Mar 05 '10 at 13:34
  • 1
    @Nick Correct, hence the use of live(). I've actually fixed it now: it's the fact that the element still has hasDatepicker as a class messing with the initialisation process. – Ed James Mar 05 '10 at 13:36
5
$(this).removeClass('hasDatepicker') .datepicker({showOn: 'both'}).focus();

solved my issue

thanks!

foxybagga
  • 4,184
  • 2
  • 34
  • 31
4

this worked for me

$.datepicker.setDefaults({ dateFormat: 'yy-mm-dd', ... });
$('input.date').live('focus', function() {
 $(this).datepicker().datepicker('show');
 true;
});
fringd
  • 2,380
  • 1
  • 18
  • 13
3

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
  });
});
Jonas Schubert Erlandsson
  • 3,910
  • 1
  • 24
  • 37
poramo
  • 546
  • 5
  • 7
1

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;
}
bruno
  • 1,830
  • 2
  • 22
  • 36
1
$( "#datepicker" ).live('mousedown',function()
{
$(this).datepicker({ 
dateFormat: 'dd/mm/yy',
minDate: 0
});     
});

Try this ..

Egglabs
  • 3,126
  • 10
  • 33
  • 48
0

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

roberthuttinger
  • 1,172
  • 1
  • 17
  • 31
0

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

Community
  • 1
  • 1
workdreamer
  • 2,836
  • 1
  • 35
  • 37