Combinig JQuery datapicker with input field validation /filter

Question

I am using the JQueryui Datepicker. But it doesn't really affect values entered manually in the input-field. Is there some way I can use the same (client) code to specify mask / validation on the input field (when the datapicker is not used - not just have datepicker output the correct format).

What would be the most consistent way to do this in the JQuery framework?

Thanks

Remarks

1. It seems jQuery put som restraints on input (I.e. I can only enter digits- mask "yymmdd") so the main thing is to get validation.

Answer 1

you can use the formatDate-option of the datepicker: http://docs.jquery.com/UI/Datepicker/formatDate

Answer 2

Use the jQuery Validation plug-in. It coexists with the UI date picker; we do this in our applications. Be aware that the default date validator will not flag clearly invalid dates such as "February 40th, 2009" because it uses the JavaScript date parser, which is more than a little bit lax about what it accepts. But it's really easy to replace the default validator with one of your own.

Answer 3

Assuming you're using the Validate plugin, you can write a custom rule which reimplements ui.Datepicker's own logic for deciding which dates are selectable or not. I had to write this today and figured someone else could benefit from knowing how:

jQuery.validator.addMethod("vdate", function(value, element) {
    // Datepicker's internal method for choosing selectable ported to a custom validator method.
    // All criteria are the same, except othermonth is omitted.
    var inst =          $.data(element,'datepicker'); // instance data used internally by datepicker's functions
    var printDate =     $(element).datepicker("getDate");
    var minDate =       $.datepicker["_getMinMaxDate"](inst, 'min', true);
    var maxDate =       $.datepicker["_getMinMaxDate"](inst, 'max');
    var beforeShowDay = $.datepicker["_optionDatepicker"](element,'beforeShowDay');
    var daySettings =   (beforeShowDay ? beforeShowDay.apply((inst.input ? inst.input[0] : null), [printDate]) : [true, '']);
    var unselectable =  (!daySettings[0] || (minDate !=null && (printDate < minDate)) || (maxDate !=null && (printDate > maxDate)));
    return (this.optional(element) || !unselectable);
}, "Please choose a valid date");

This particular addMethod has the advantage of checking each field individually, so if you have multiple datepickers sharing the classname 'vdate' but perhaps having different minDate/maxDate/beforeShowDay settings, Validate will check and follow each datepicker's own rules.

Also, if you've written a complicated function for beforeShowDay that excludes weekends, days whose numbers are prime, your wife's birthday, and the last day of every month, so long as it works in ui.Datepicker, Validate will recognize all of them as invalid dates as well.