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

score 10 · Answer 1 · answered Sep 23 '10 at 16:13

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.

score 8 · Answer 2 · answered Sep 21 '10 at 15:20

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.

Emily · Answer 3 · 2015-04-15T20:08:29.110

6

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.

edited Apr 15 '15 at 20:08

answered Sep 23 '10 at 16:02

Emily

304
3
6

Emily please fix the date in the validation message i.e. 2010-12-15 – Sola Oderinde Jan 27 '15 at 13:52

Taras Bilinsky · Answer 4 · 2018-01-13T07:32:56.037

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']});

Alexander · Answer 5 · 2016-02-23T14:54:59.800

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.

toddmo · Answer 6 · 2020-02-24T20:55:22.083

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>

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. — Brian Peterson, Feb 24 '20 at 18:44
@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, Feb 24 '20 at 20:50

jQuery Validate (Date Range)

6 Answers6

Linked