Search code examples
javascriptphpcodeignitercodeigniter-2codeigniter-3

Compare dates - End date should be greater than start date

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.