Validate that end date is greater than start date with jQuery

Question

How do I check validate in jQuery whether end date  textbox  is greater than start date  textbox

User · Answer

In javascript jquery most of the developer uses From  amp  To date comparison which is string  without converting into date format  The simplest way to compare from date is greater then to date is   Date parse fromDate   gt  Date parse toDate    Always parse from and to date before comparison to get accurate results

User · Answer

var startDate   new Date     startDate   val     var endDate   new Date     endDate   val      if  startDate  lt  endDate      Do something     That should do it I think

User · Answer

The date values from the text fields can be fetched by jquery s  val   Method like  var datestr1       datefield1-id   val    var datestr2       datefield2-id   val      I d strongly recommend to parse the date strings before comparing them  Javascript s Date object has a parse  -Method  but it only supports US date formats  YYYY MM DD   It returns the milliseconds since the beginning of the unix epoch  so you can simply compare your values with   or  lt    If you want different formats  e g  ISO 8661   you need to resort to regular expressions or the free date js library    If you want to be super user-fiendly  you can use jquery ui datepickers instead of textfields  There is a datepicker variant that allows to enter date ranges   http   www filamentgroup com lab date range picker using jquery ui 16 and jquery ui css framework

User · Answer

I was just tinkering with danteuno s answer and found that while good-intentioned  sadly it s broken on several browsers that are not IE  This is because IE will be quite strict about what it accepts as the argument to the Date constructor  but others will not  For example  Chrome 18 gives   gt  new Date  66     Sat Jan 01 1966 00 00 00 GMT 0200  GTB Standard Time    This causes the code to take the  compare dates  path and it all goes downhill from there  e g  new Date  11   is greater than new Date  66   and this is obviously the opposite of the desired effect    Therefore after consideration I modified the code to give priority to the  numbers  path over the  dates  path and validate that the input is indeed numeric with the excellent method provided in Validate decimal numbers in JavaScript - IsNumeric     In the end  the code becomes     validator addMethod       greaterThan       function value  element  params            var target     params  val            var isValueNumeric    isNaN parseFloat value    amp  amp  isFinite value           var isTargetNumeric    isNaN parseFloat target    amp  amp  isFinite target           if  isValueNumeric  amp  amp  isTargetNumeric                return Number value   gt  Number target                      if    Invalid NaN  test new Date value                  return new Date value   gt  new Date target                      return false              Must be greater than  0

User · Answer

Just expanding off fusions answer  this extension method works using the jQuery validate plugin  It will validate dates and numbers  jQuery validator addMethod  greaterThan    function value  element  params         if    Invalid NaN  test new Date value              return new Date value   gt  new Date   params  val                return isNaN value   amp  amp  isNaN   params  val                 Number value   gt  Number   params  val          Must be greater than  0        To use it       EndDate   rules  add     greaterThan    StartDate        or     form   validate       rules            EndDate    greaterThan    StartDate

User · Answer

Reference jquery validate js and jquery-1 2 6 js  Add a startDate class to your start date textbox  Add an endDate class to your end date textbox   Add this script block to your page -   lt script type  text javascript  gt        document  ready function               validator addMethod  endDate   function value  element                var startDate       startDate   val                return Date parse startDate   lt   Date parse value     value                      End date must be after start date                formId   validate             lt  script gt    Hope this helps  -

User · Answer

I like what Franz said  because is what I m using  P  var date ini   new Date     id date ini   val    getTime    var date end   new Date     id date end   val    getTime    if  isNaN date ini        error date ini    if  isNaN date end        error date end    if  date ini  gt  date end       do something

User · Answer

document  ready function           txtFromDate   datepicker           minDate  0          maxDate    60D           numberOfMonths  2          onSelect  function selected                  txtToDate   datepicker  option   minDate   selected                             txtToDate   datepicker           minDate  0          maxDate   60D           numberOfMonths  2          onSelect  function selected                   txtFromDate   datepicker  option   maxDate   selected                          Or Visit to this link

User · Answer

Little late to the party but here is my part     Date parse fromDate   gt  Date parse toDate    Here is the detail   var from       from   val    var to       to   val     if Date parse from   gt  Date parse to       alert  Invalid Date Range      else     alert  Valid date Range

User · Answer

So I needed this rule to be optional and none of the above suggestions are optional   If I call the method it is showing as required even if I set it to needing a value   This is my call         my form   validate       rules           end date             required  function element   return      end date   val                   greaterStart    start date                       validate     My addMethod is not as robust as Mike E  s top rated answer  but I m using the JqueryUI datepicker to force a date selection   If someone can tell me how to make sure the dates are numbers and have the method be optional that would be great  but for now this method works for me   jQuery validator addMethod  greaterStart   function  value  element  params        return this optional element     new Date value   gt   new Date   params  val        Must be greater than start date

User · Answer

First you split the values of two input box by using split function  then concat the same in reverse order  after concat nation parse it to integer  then compare two values in in if statement    eg 1 20-11-2018 2 21-11-2018  after split and concat new values for comparison 20181120 and 20181121 the after that compare the same     var date1       datevalue1   val    var date2       datevalue2   val    var d1   date1 split  -    var d2   date2 split  -     d1   d1 2  concat d1 1   d1 0    d2   d2 2  concat d2 1   d2 0     if  parseInt d1   gt  parseInt d2              fromdatepicker   val        else

User · Answer

function endDate          validator addMethod  endDate   function value  element          var params     startDate           if   element  parent   parent   find params  val                    if    Invalid NaN  test new Date value                     return new Date value   gt  new Date   element  parent   parent   find params  val                          return isNaN value   amp  amp  isNaN   element  parent   parent   find params  val        parseFloat value   gt  parseFloat   element  parent   parent   find params  val        value                             else          return true                  jQuery format  must be greater than start date         function startDate                  validator addMethod  startDate   function value  element                var params     endDate               if   element  parent   parent   parent   find params  val                          if    Invalid NaN  test new Date value                        return new Date value   lt  new Date   element  parent   parent   parent   find params  val                              return isNaN value   amp  amp  isNaN   element  parent   parent   find params  val        parseFloat value   lt  parseFloat   element  parent   parent   find params  val        value                                                   else                       return true            jQuery format  must be less than end date         Hope this will help

User · Answer

If the format is guaranteed to be correct YYYY MM DD and exactly the same between the two fields then you can use   if  startdate  gt  enddate       alert  error      As a string comparison

User · Answer

this should work   x000D   x000D    validator addMethod  endDate   function value  element    x000D              var startDate       date open   val    x000D              return Date parse startDate   lt   Date parse value     value        x000D                End date must be after start date    x000D   x000D   x000D

User · Answer

jQuery   from date   on  change   function        var date     this  val        jQuery   to date   datetimepicker  minDate  date

[jquery] Validate that end date is greater than start date with jQuery

Examples related to jquery

Examples related to date

Examples related to jquery-validate