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 betwe

Answer 1

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 2

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 3

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 4

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.

Answer 5

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 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>