3

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>
Community
  • 1
  • 1
sunshine
  • 371
  • 1
  • 4
  • 18

3 Answers3

7

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.

Andrée Björkgård
  • 101
  • 1
  • 4
0

<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>
Nayan Raval
  • 1
  • 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](/help/how-to-answer). – Community Jan 18 '22 at 13:40
0

<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>
Mani M
  • 1
  • 1
  • While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply. – jasie Aug 10 '22 at 13:57