Display a message when user clicks outside of the the minDate/maxDate bounds in a JQuery datepicker

Question

Hi, I'm using the JQuery datepicker and I have the minDate and maxDate options set correctly so that the dates outside of that span are disabled and grayed out.

No problem.

Now, I want to capture the event when a user does try and select one of these disabled dates. What event do I need to capture so that I can pop up some exclamatory text?

I've tried onSelect and it doesn't seem to work. (It would make sense that it's disabled.)

(The business reason, just in case you're wondering why I want to mess with the elegance/obviousness of the grayed-out dates, is so that I can tell them why these particular dates are out of bounds, and what alternate action to take on the site.)

Any tips? Or do I have to go in and fuss with the library?

Answer 1

You could just listen for the click event on invalid date elements, they have a class of
ui-datepicker-unselectable, so you can use .live() like this:

$(".ui-datepicker-unselectable").live('click', function() {
  alert("Invalid date!");
});

​ Give it a try here

Answer 2

$(document).ready(function() {
    $('td.ui-datepicker-unselectable').live('click', function() {
        alert("stop! hammer time");
    });
});