I needed to use Jquery datepicker and mask plugin on the same input field on a page, which’s content was created with AJAX, so I had to use the jquery live function. I found a solution here, but althoughthis was a great article, there were some problems with it.

When the user deleted characters from the date, the whole date became empty and the datepicker went crazy, too. So I tried to hack jquery for a while, but after a while I think I found a good solution.

$(’#dateFrom’).live(‘click’, function() { if (!$(this).data(“datepicker”)) { $(this).datepicker(‘destroy’).datepicker(datePickerOptions).focus(); }  });

This adds the datepicker correctly with the live function.

$(’#dateFrom’).mask(“99/99/9999”);

This sets the date mask for the input field.

$(’#dateFrom’).live(‘keydown’, function() {

$(this).datepicker(‘hide’); $(this).datepicker(‘destroy’);

});

And this one “destroys” the datepicker when the user starts to type.

For me until now, this solution works nicely.

Voila!