jQuery Validate (Date Range)

Question

Im using the jQuery validate plugin and was wondering if there was a way to validate if the date entered into a field was a date like yyyy-mm-dd AND the the date falls between Nov 29 2010 - Dec 15 2010

Im pretty new to jQuery so if there is an answer please dumb up the answer as much as possible so i can get through it. Thanks a lot for any/all suggestions

Answer 1

If you want a reusable function, you might extend Emily and lonesomeday's answers to allow an argument to be provided:

$.validator.addMethod('daterange', function(value, element, arg) {
 // Same as above
 var startDate = Date.parse(arg[0]),
 endDate = Date.parse(arg[1]),
 enteredDate = Date.parse(value); 
 // Same as below
 }, $.validator.format("Please specify a date between {0} and {1}."))

See the source of the jQuery validation range method for an example.

Answer 2

I've never used the validation plugin, but a look through the API suggests that something like this might work:

$.validator.addMethod('daterange', function(value, element) {
 if (this.optional(element)) {
 return true;
 }
 var startDate = Date.parse('2010-11-29'),
 endDate = Date.parse('2010-12-15'),
 enteredDate = Date.parse(value);
 if (isNan(enteredDate)) {
 return false;
 }
 return ((startDate <= enteredDate) && (enteredDate <= endDate));
});

You would then, I think, need to add the daterange class the the appropriate element.

Answer 3

lonesomeday's answer is pretty close, with a few tweaks. I would end the code as follows:

 if(isNaN(enteredDate)) return false;
 return ((startDate <= enteredDate) && (enteredDate <= endDate));
}, "Please specify a date between 2010年11月29日 and 2010年12月15日");

This fixes the isNaN function, and also provides an error message to your users so they know what you're looking for.

• Sol: <pedantic>Emily please fix the date in the validation message i.e. 2010年12月15日</pedantic>

Answer 4

Hold your horses, guys! :)

Do not forget, that Date.parse cannot work properly with different locales, it only parses properly specific date format.

If you use various date formats (culture-specific) - it's better to stick to jquery datepicker date handling.

So, supposing you've loaded correct culture-specific jquery datepicker object (for instance, jquery.ui.datepicker-nb-NO.js, where date format is DD.MM.yyyy and is not parsed by Date.parse) and initialized it, proper approach is:

$.validator.addMethod('dateRange', function (value, element, parameterValue) {
 if (this.optional(element) && !value) {
 return true;
 }
 var dateFormat = $(element).datepicker('option', 'dateFormat');
 try {
 var startDate = $.datepicker.parseDate(dateFormat, parameterValue[0]).getTime();
 var endDate = $.datepicker.parseDate(dateFormat, parameterValue[1]).getTime();
 var enteredDate = $.datepicker.parseDate(dateFormat, value).getTime();
 return (startDate <= enteredDate) && (enteredDate <= endDate);
 } catch (error) {
 return true;
 }
 });

I've put parseDate stuff inside try block, because there's no normal way to figure out if the date has been parsed properly.

Answer 5

Made a couple small corrections in Connor's code.

The resulting working code is:

$.validator.addMethod('daterange', function(value, element, arg) {
 if (this.optional(element) && !value) {
 return true;
 }
 var startDate = Date.parse(arg[0]),
 endDate = Date.parse(arg[1]),
 enteredDate = Date.parse(value);
 if (isNaN(enteredDate)) {
 return false;
 }
 return ( (isNaN(startDate) || (startDate <= enteredDate)) &&
 (isNaN(endDate) || (enteredDate <= endDate)));
 }, $.validator.format("Please specify a date between {0} and {1}."));

Then use it like this:

$("#some_date_input").rules("add",{daterange:['01/31/2001','01/31/2020']});

Answer 6

Date range min/max attributes on date type input

<!--jquery validate-->
 <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
 <script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
<input id="christmas-shopper-reservation" type="date" min="2010-11-29" max="2010-12-15">
<label id="christmas-shopper-reservation-error" class="error" style="display:none;" for="christmas-shopper-reservation"></label>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!--jquery validate-->
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.2.3/jquery.validate.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.2.3/additional-methods.min.js"></script>
 <input id="christmas-shopper-reservation" type="date" min="2010-11-29" max="2010-12-15">
 
 <label id="christmas-shopper-reservation-error" class="error" style="display:none;" for="christmas-shopper-reservation"></label>

• Brian Peterson: Does this work? It seems like jquery validate interprets the min and max attributes as indicating a number needing to validate to me, as I keep getting the error "Please enter a value greater than or equal to NaN." Frustrating.
• toddmo: @BrianPeterson, well that project is long gone, don't even remember what it was. But I do know that I would have never put an answer unless I had gotten it to work on my project. So, yes. It worked for me. I was probably using Chrome to test if I had to guess.
• toddmo: @BrianPeterson, I added a snippet. Tests fine in Chrome.