JQuery UI Datepicker - constricting input on the text field in regard to the minDate option?

Question

$('#Date_Of_Reservation').datepicker({showAnim: 'fadeIn',minDate: twoBussinessDaysToDays(),constrainInput: true});

My function works fine. The graphical calendar works fine as well - graying out the non-selectable dates. The problem is the validation. While the minDate field is working if the user types the date in manually into the text field they can enter dates prior to the minDate. No validation in regard to the minDate occurs. Is there an elegant solution for this problem?

Edit: It does work great when I push enter after putting something in the text field. But when I tab or click somewhere else the validation isn't triggered.

score 1 · Accepted Answer · edited May 23 '17 at 10:26

Use the validator plugin to ensure valid input
Add a custom date range method

the method in your case would be:

$.validator.addMethod("dateRange", function(value, element) {
    // put your own logic here something like this
    return new Date(value) > twoBussinessDaysToDays();
},
"Please enter a valid date"
);

And tell jquery to validate the form:

$('#myForm').validate({
    rules: {
        Date_Of_Reservation: { dateRange: true }
    }
});

JQuery UI Datepicker - constricting input on the text field in regard to the minDate option?

1 Answers1