Compare dates - End date should be greater than start date

Question

I cannot think of a logic to implement the end date always greater than start date. Here is my view code and there are two fields Event End and Event Start. Tried Implementing like shown in Validate that end date is greater than start date with jQuery , but failed. How to implement this?

<div class="clearfix"></div>
<div class="control-group form-group">

  <label class="control-label col-md-4" style="text-align:left">Event Start</label>
  <div class="controls" style="margin-left:0px">

    <div class="col-md-3 date" data-date="12-02-2012" data-date-format="dd-mm-yyyy" data-date-viewmode="years">
      <input class="m-wrap col-md-11 m-ctrl-medium datepicker form-control" required="required" name="starttimedate" id="ed_starttimedate" type="text" value="<?php echo $_POST['starttime']?date('d-m-Y',$_POST['starttime']):date('d-m-Y'); ?> " />
      <!-- <span class="add-on"><i class="fa fa-calendar" style="margin-top:5px"></i></span> -->
    </div>
    <div class="col-md-1">&nbsp;</div>
    <div class="col-md-3  bootstrap-timepicker-component">
      <input class="m-wrap col-md-11 m-ctrl-medium timepicker-default form-control" required="required" value="<?php echo date('h:i A',$_POST['starttime']);?>" name="starttimetime" id="ed_starttimetime" type="text" />
      <!-- <span class="add-on"><i class="fa fa-clock-o" style="margin-top:5px"></i></span>-->
    </div>

    <div class="clearfix"></div>

  </div>

</div>
<div class="clearfix"></div>
<div class="control-group form-group">
  <label class="control-label col-md-4" style="text-align:left">Event End</label>
  <div class="controls ">
    <div class="col-md-3 date" data-date="12-02-2012" data-date-format="dd-mm-yyyy" data-date-viewmode="years">
      <input class="m-wrap col-md-11 m-ctrl-medium datepicker form-control" required="required" name="endtimedate" id="ed_endtimedate" type="text" value="<?php echo $_POST['endtime']?date('d-m-Y',$_POST['endtime']):date('d-m-Y'); ?> " />
      <!--<span class="add-on"><i class="fa fa-calendar" style="margin-top:5px"></i></span>-->
    </div>
    <div class="col-md-1">&nbsp;</div>
    <div class="col-md-3 bootstrap-timepicker-component">
      <input class="m-wrap col-md-11 m-ctrl-medium timepicker-default form-control" required="required" value="<?php echo date('h:i A',$_POST['endtime']);?>" name="endtimedatetime" id="ed_endtimedatetime" type="text" />
      <!-- <span class="add-on"><i class="fa fa-clock-o" style="margin-top:5px"></i></span>-->
    </div>
  </div>

SCRIPT IS:

<script>
  $("#ed_endtimedate").change(function() {
    var startDate = document.getElementById("ed_starttimedate").value;
    var endDate = document.getElementById("ed_endtimedate").value;

    if ((Date.parse(ed_endtimedate) <= Date.parse(ed_starttimedate))) {
      alert("End date should be greater than Start date");
      document.getElementById("ed_endtimedate").value = "";
    }
  });
</script>

Solution

In your if-case you are actually trying to reference the id's of the input-fields and not the two variables you've defined. An error will occur because the script is gonna try and read two variable that is not defined. See below for a fix

<script>
  $("#ed_endtimedate").change(function() {
    var startDate = document.getElementById("ed_starttimedate").value;
    var endDate = document.getElementById("ed_endtimedate").value;

    if ((Date.parse(endDate) <= Date.parse(startDate))) {
      alert("End date should be greater than Start date");
      document.getElementById("ed_endtimedate").value = "";
    }
  });
</script>

After re-reading your code I see that you use an invalid format for the date. The ISO standard for date formatting is yyyy-mm-dd but you are using dd-mm-yyyy.

Comments

[Andrée Björkgård]

The form is always going to be submitted... There is nothing in this code that is going to deny the form from being submitted.

[Admin]

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.