jQuery Forum

Hello,

this is my first post to this forum and hopefully a useful contribution to others with the same issue.

I just spent a few hours today trying to figure out why the placeholder plugin (from webcloud.se) wasn't working in conjunction with the jQuery UI datepicker.

It seems as if the blur event is not called at the right moment when you select a date using the datepicker, at least when used with any placeholder script (I have tried 7 different placeholder plugins today, they all behave the same).

What happens?

1. You have a datepicker field with a placeholder in a browser that does not support placeholders natively (I used IE9 for testing).
2. You click on the input field; the datepicker opens
   
3. Focus is added to the datepicker input field, the 'placeholder' class is removed
4. You select a date
5. The datepicker is closed, the input field still being empty
   
6. The placeholder script is triggered because of the blur event
7. Placeholder determines that the input field is empty, and restores the placeholder and placeholder class
8. The datepicker changes the value of the field to the selected date
9. Result: the date is selected, but the 'placeholder' class is once again present, messing up your presentation

I tried a few different things to make this work properly without having to change the datepicker UI or placeholder code by firing off the focus event, however, since I have a seperate class added on the focus event (to highlight the current field), this didn't work either.

I ended up fixing it with an additional property in the datepicker call:

1. $( '#datepicker' ).datepicker( { onClose: function () { $( this ).removeClass( 'placeholder' ); } );

This seems to work nicely across all browsers (IE, Safari, Opera, Chrome and FF; all the latest versions at least).

I was wondering, is there a better way to do this? Should the order of things be changed in the datepicker code? I look forward to your replies! :)