jQuery validation : End date should be Greater than Start date
jQuery validation is powerful,easy to use and most widely used client-side form validation. In addition to this you can add custom rules to default rules of jquery validation. This can be done by adding "addMethod" function as per your requirement.
In some case when you are working around dates you need to validate two dates. For e.g if you are working with Start Date and End date than "End Date must be Greater than Start Date". This can be done by javascript by comparing two dates. But if you are using jquery validation than below is the easy and simple way to check that End date is Greater than Start Date or not.
Just copy below code and paste it in to your validation file. Now add "enddate" class to end date textbox , add "startdate" class to startdate textbox. Thats it
var startdatevalue = $('.startdate').val();
return Date.parse(startdatevalue) < Date.parse(value);
}, "End Date should be greater than Start Date.");
Date.parse will convert string value(form element value) in to javascript date object as javascript we need to compare two dates not two string.
To know more about programming,JavaScript issues,jQuery,MYSQL database,php info,php editor,programming php,Open-source,php help and php script , subscribe to our feed by entering email address below. You will get updates via email about every tutorial posted on this site . It will not take more than a sec.






I am
about 2 years ago
What if more than 2 startdate and enddate controls exists?same below method cannot be used.What is the approach
about 2 years ago
What if more than 2 startdate and enddate controls exists?same below method cannot be used.What is the approach
about 2 years ago
@vishnu , yes if there are 2 start dates and end dates than same class will not be applicable. we need to create another method with different class name.
For e.g. Above mention method is used for one start date and end date and another method will be used for another start date and end date.
1.
$.validator.addMethod("enddate", function(value, element) {
var startdatevalue = $('.startdate').val();
return Date.parse(startdatevalue) < Date.parse(value);
}, "End Date 1 should be greater than Start Date 1.")
2.
$.validator.addMethod("enddate2", function(value, element) {
var startdatevalue2 = $('.startdate2').val();
return Date.parse(startdatevalue2) < Date.parse(value);
}, "End Date 2 should be greater than Start Date 2.")
Now what you have to do is just write different class.Thats it.
about 2 years ago
@vishnu , yes if there are 2 start dates and end dates than same class will not be applicable. we need to create another method with different class name.
For e.g. Above mention method is used for one start date and end date and another method will be used for another start date and end date.
1.
$.validator.addMethod("enddate", function(value, element) {
var startdatevalue = $('.startdate').val();
return Date.parse(startdatevalue) < Date.parse(value);
}, "End Date 1 should be greater than Start Date 1.")
2.
$.validator.addMethod("enddate2", function(value, element) {
var startdatevalue2 = $('.startdate2').val();
return Date.parse(startdatevalue2) < Date.parse(value);
}, "End Date 2 should be greater than Start Date 2.")
Now what you have to do is just write different class.Thats it.
about 2 years ago
Hi,
Thanks for quick reply.Can't we have a common validation function which accepts 2 parameters( From date and To date).
about 2 years ago
Hi,
Thanks for quick reply.Can't we have a common validation function which accepts 2 parameters( From date and To date).
about 2 years ago
As you know we need to mention class name for validation. In this function we are taking value of start date using class name. So if we have two same class name than every time code get first mention start date. Which is not actually what we need for second start date and end date validation. This is the case why we need to define two different functions.
about 2 years ago
As you know we need to mention class name for validation. In this function we are taking value of start date using class name. So if we have two same class name than every time code get first mention start date. Which is not actually what we need for second start date and end date validation. This is the case why we need to define two different functions.
about 2 years ago
Work great! congratulations
about 2 years ago
Work great! congratulations
about 2 years ago
Thanks..
about 2 years ago
Thanks..
about 2 weeks ago
If you are using jQuery UI Datepicker then you can inbuilt mechanism of date picker to solve this problem. Find out more on this link,
http://jquerybyexample.blogspot.com/2012/01/end-date-should-not-be-greater-than.html