jQuery UI Datepicker Validation

The Validation plugin lets you apply validations to your fields to prevent a form being submitted with invalid values. Meanwhile the jQuery UI Datepicker plugin lets the user select a date from a pop calendar, ensuring a correct entry. A problem arises if the user can also enter a date manually as they may not provide a valid value. The plugin presented here extends the Validation plugin to allow Datepicker fields to be validated before submission.

Add the jquery.ui.datepicker.validation.js extension to your page, following both the jQuery UI/Datepicker and Validation modules. The current version is 1.0.1 and works with jQuery UI Datepicker version 1.8.6.

A new validation rule is defined (dpDate) that may be added as a class to your datepicker fields or specified in the rules section of the validate settings. As well as checking the text against the current dateFormat, this validator also checks any minDate and maxDate settings and any beforeShowDay callback that might make the date unselectable.

Another new validation (dpCompareDate) lets you compare one date field against another date - either the value of another datepicker field, a specific date, or today. Specify the rule composed of two parts: the comparison to perform and the reference date to compare with. The comparison is one of the following: 'equal' or 'same' or 'eq', 'notEqual' or 'notSame' or 'ne', 'lessThan' or 'before' or 'lt', 'greaterThan' or 'after' or 'gt', 'notLessThan' or 'notBefore' or 'ge', 'notGreaterThan' or 'notAfter or 'le'. The reference date can be given as a Date object, as a string in the current dateFormat, as the literal 'today', or as a jQuery selector for another datepicker field to extract it from.

The entire comparison rule must be specified in the rules section of the validate call with the name 'dpCompareDate'. Its value can be either a single string (provided both parts of the comprison above are strings), as an array with the comparison and reference date as elements, or as an object with the comprison as its attribute and the reference date as that value.

There is also a custom errorPlacement function defined so that the error messages appear after any trigger button or image (or before them if using a right-to-left localisation).

You can override the validation error messages through the messages setting of the validation plugin, or globally via the datepicker setDefaults function with the following settings: validateDate, validateDateMin, validateDateMax, validateDateMinMax, validateDateCompare, validateDateToday, validateDateOther, validateDateEQ, validateDateNE, validateDateLT, validateDateGT, validateDateLE, validateDateGE. Within some messages, substitution points are represented by the text '{0}' and '{1}'.

$('#validateForm').validate({
	errorPlacement: $.datepicker.errorPlacement,
	rules: {
		validDefaultDatepicker: {
			required: true,
			dpDate: true
		},
		validBeforeDatepicker: {
			dpCompareDate: ['before', '#validAfterDatepicker']
		},
		validAfterDatepicker: {
			dpCompareDate: {after: '#validBeforeDatepicker'}
		},
		validTodayDatepicker: {
			dpCompareDate: 'ne today'
		},
		validSpecificDatepicker: {
			dpCompareDate: 'notBefore 01/01/2012'
		}
	},
	messages: {
		validFormatDatepicker: 'Please enter a valid date (yyyy-mm-dd)',
		validRangeDatepicker: 'Please enter a valid date range',
		validMultiDatepicker: 'Please enter at most three valid dates',
		validAfterDatepicker: 'Please enter a date after the previous value'
	}});

Unvalidated date:

$.datepicker.setDefaults(
	{showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar-green.gif'});
$('#defaultDatepicker').datepicker();

Validate date:

$('#validDefaultDatepicker').datepicker();

Validate alternate format date:

$('#validFormatDatepicker').datepicker({dateFormat: 'yy-mm-dd'});

Validate right-to-left date:

$('#validRTLDatepicker').datepicker({isRTL: true});

Validate date with minimum:

$('#validMinDatepicker').datepicker({minDate: -7});

Validate date with maximum:

$('#validMaxDatepicker').datepicker({maxDate: +7});

Validate date with min/max:

$('#validMinMaxDatepicker').datepicker({minDate: -7, maxDate: +7});

Comparison before/after: to

$('#validBeforeDatepicker,#validAfterDatepicker').datepicker();

Comparison not today:

$('#validTodayDatepicker').datepicker();

Comparison specific date:

$('#validSpecificDatepicker').datepicker();

 

Usage
  1. Include the jQuery library, jQuery UI library, and validate plugin in the head section of your page.
    <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/south-street/jquery-ui.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.js"></script>
  2. Download and include the jQuery UI Datepicker Validation JavaScript in the head section of your page.
    <script type="text/javascript" src="js/jquery.ui.datepicker.validation.js"></script>
    Alternately, you can use the packed version jquery.ui.datepicker.validation.pack.js (3.6K vs 8.0K), or the minified version jquery.ui.datepicker.validation.min.js (4.1K, 1.5K when zipped).
  3. Add the dpDate marker class to your datepicker fields or specify dpDate in the rules section of your validate call.
    $(form).validate({
    	rules: {
    		startDate: {
    			required: true,
    			dpDate: true
    		}
    	}	
    });
Comments

None as yet.

Contact Keith Wood at wood.keith{at}optusnet.com.au with comments or suggestions.

Change History
VersionDateChanges
1.0.119 Mar 2011
  • Added dpCompareDate for comparison validations
1.0.027 Nov 2010
  • Initial release for jQuery UI Datepicker 1.8.6