jQuery Validate (Date Range)

date range validation
jquery validate date difference
invalid date validation in jquery
jquery datepicker date range example
jquery validator methods
javascript date range
jquery valid date range
jquery validation example

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


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.

Date range validation example - JSFiddle, This ensures that validating 'end' will not trample 'start'. 13. // see http://​stackoverflow.com/questions/22107742/jquery-validation-date-range-issue. 14. 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


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.

Validating date range in any format with jquery UI datepickers , The issue i am having is as follows. I have two datepickers that are going to be localised into many languages, therefore will have many date  Description: Makes the element require a given value range. range( range )


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.

range method, Description: Makes the element require a given value range. ¶range( range ). range. Type: Array. Value range required. ¶Example: ¶Makes  Return true if the value is a valid date. Uses JavaScript's built-in Date to test if the date is valid, and therefore does no sanity checks. Only the format must be valid, not the actual date, eg 30/30/2008 is a valid date. DEPRECATION warning: This method is deprecated and will be removed in version 2.0.0.


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.

Date Range Form with Validation. Live demo: http://jsfiddle.net , Built with jQuery, jQuery UI DatePicker, jQuery Validation, and Zurb Foundation This form allows choosing a date range from any previous day up to and  jQuery Validation Plugin This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an existing application with lots of existing markup.


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

jQuery Kalendae Date Range Validation (requires Moment.js) · GitHub, <h2>Date Validation Using jQuery Datepicker</h2> Say we need to loosen the date range to “3 months and 15 days before and after today's  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.


How to Validate Date when Using jQuery Datepicker, How to validate Date (calendar) controls in a guided ad-hoc HTML page? else{ //Detailed check for valid date ranges var monthfield=input.value.split("/")[0] var  A single line of jQuery to select the form and apply the validation plugin, plus a few annotations on each element to specify the validation rules. Of course that isn't the only way to specify rules. You also don't have to rely on those default messages, but they come in handy when starting to setup validation for a form.


JavaScript to Validate Date Entry, @param {string|Date|jQuery|Element} source The source of the other date. @​param enter a date between {0} and {1}'] Date range validation message. Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.


JSDoc: Source: jquery.datepick.validation.js, Javascript Data Type How to - Check date range validation. <html> <head> <​script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>  Date range example. One more example illustrates how to use the callback validator and momentjs to check whether or not a date is in given range. momentjs provides isBefore() and isAfter() methods which are exactly what we need.