CODEWITHSUNDEEP
jqueryvalidationdatejquery-validate
Varun
Varun

Reputation: 5061

jQuery date validation - format and range

I have a requirement where I will have 2 date fields (to, from) and needs to validate them:

what will be the best way to implement the same, am using jquery validation api

Note: I did read about format validation on some of the links like jQuery Date Validation (YYYY-MM-DD) but these doesnt ensure that its a valid date I may end up entering something like 02/31/2999

i tried 

jQuery.validator.addMethod("DateFormat", function(value, element) {
    var date_regex = /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/ ;
    var values = value.split("/");
    return this.optional(element) || (value.test(date_regex) && (new Date(values[2], values[0], values[1])));
});

Upvotes: 3

Views: 7613

Answers (2)

Varun
Varun

Reputation: 5061

added followign validation methods

// jquery validation method to validate date format
jQuery.validator.addMethod("DateFormat", function(value, element) {
    var date_regex = /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/ ;
    var comp = value.split('/');
    var m = parseInt(comp[0], 10);
    var d = parseInt(comp[1], 10);
    var y = parseInt(comp[2], 10);
    var date = new Date(y,m,d);
    return this.optional(element) || (date_regex.test(value) && date.getFullYear() == y && date.getMonth() == m && date.getDate() == d);
});
//jquery validation method to validate date range
jQuery.validator.addMethod("DateToFrom", function(value, element, arg0, arg1) {
    var comp = value.split('/');
    var m = parseInt(comp[0], 10);
    var d = parseInt(comp[1], 10);
    var y = parseInt(comp[2], 10);
    var currentEltdate = new Date(y,m,d);

    comp = $("#"+arg0).val().split('/');
    m = parseInt(comp[0], 10);
    d = parseInt(comp[1], 10);
    y = parseInt(comp[2], 10);
    var otherEltDate = new Date(y,m,d);

    var lowerDate, upperDate;
    if(arg1 == true){//current element should be lower date
        lowerDate = currentEltdate;
        upperDate = otherEltDate;
    }else{
        lowerDate = otherEltDate;
        upperDate = currentEltdate;
    }
    return this.optional(element) || (lowerDate <= upperDate);
});
// jquery validation method to validate date range
jQuery.validator.addMethod("DateRange", function(value, element, arg0, arg1) {
    var comp = arg0.split('/');
    var m = parseInt(comp[0], 10);
    var d = parseInt(comp[1], 10);
    var y = parseInt(comp[2], 10);
    var startDate = new Date(y,m,d);

    comp = arg1.split('/');
    m = parseInt(comp[0], 10);
    d = parseInt(comp[1], 10);
    y = parseInt(comp[2], 10);
    var endDate = new Date(y,m,d);

    comp = value.split('/');
    m = parseInt(comp[0], 10);
    d = parseInt(comp[1], 10);
    y = parseInt(comp[2], 10);
    var date = new Date(y,m,d);

    return this.optional(element) || ((startDate <= date) && (date <= endDate));
});

Upvotes: 0

Ben Barden
Ben Barden

Reputation: 2111

We have handled pretty much exactly this problem. What you need to do is create a series of validation rules. First, you give the dates some sort of appropriate class attributes - "fromDate" and "toDate", say.

  • One that uses a regular expression to make sure that they're in the right format
  • one that date-converts that using the javascript Date object, and makes sure that they're in the right range.
  • one for the from date, that knows how to find the to date (generally handled by going up a level or two, and then running .find('input.toDate')) or similar on it, and compares them.
  • Another, reversed, for the to date.
  • One that returns true if both are empty, but false if one is empty and the other full

Then you assign the appropriate rules to the appropriate classes with jQuery.validate.addClassRules().

Put all of that code before you set up your validator on the form in question, and it should work just fine. Syntax is left as an exercise for the reader.

Upvotes: 2

Related Questions