CODEWITHSUNDEEP
javascriptjavajsp
Annadate Piyush
Annadate Piyush

Reputation: 458

Past and date comparison condition

With the below code, I'm unable to set the following:

  1. Start date should be of future
  2. End date should be higher than start date
<tr>
    <td><label for="maintsd">Maintenance Start Date (<%=tzShort%>)</label></td>
    <td><input style="border:1px solid grey; width: 100%" type="datetime-local" id="maintsd" required="true" name="maintsd"></td><td></td>
</tr>
<tr>
    <td>
        <label for="mainted">Maintenance End Date (<%=tzShort%>)</label>
    </td>
    <td>
        <input  style="border:1px solid grey; width: 100%"  type="datetime-local" id="mainted" required="true" name="mainted">
    </td>

Date is in T format.

Date which is being saved is retrieved as below:

 public String getMaintEDString() {
  //  ZoneId z = ZoneId.systemDefault();
    LocalDateTime datetime = LocalDateTime.ofInstant(this.maintED, ZoneId.systemDefault());
    this.maintEDString = DateTimeFormatter.ofPattern("yyyy-MM-dd hh:mm").format(datetime);
    return maintEDString;
}

public String getMaintSDString() {
  //   ZoneId z = ZoneId.of( "America/Los_Angeles" );
    LocalDateTime datetime = LocalDateTime.ofInstant(this.maintSD, ZoneId.systemDefault());
    this.maintSDString = DateTimeFormatter.ofPattern("yyyy-MM-dd hh:mm").format(datetime);
    return maintSDString;
}

Upvotes: 0

Views: 75

Answers (1)

Swati
Swati

Reputation: 28522

You can use min attribute in your input-box and set there min-date this will disable all previous date i.e : min="<%=tzShort%>" and then on click of submit button get both inputs i.e : start and end date compare both values and depending on this show error message or submit form.

Demo Code :

function validate() {
  //get start and end date and convert to dates 
  var sdate = new Date(document.getElementById("maintsd").value);
  var edate = new Date(document.getElementById("mainted").value);
  var flag = true; //for validating
  //if end date is greater
  if (edate >= sdate) {
    console.log("end_date is greater then strt_date");
    document.getElementById("error").innerHTML = "";
  } else {
    flag = false;
    document.getElementById("error").innerHTML = "*end_date should be  greater then strt_date"; //show this message

  }
  return flag;
}
<!--onsubmit validate will get called-->
<form onsubmit="return validate();">
  <table>
    <tr>
      <td><label for="maintsd">Maintenance Start Date (<%=tzShort%>)</label></td>
      <td><input style="border:1px solid grey; width: 100%" type="datetime-local" id="maintsd" required="true" name="maintsd" value="2020-08-12T10:22" min="2020-08-12T10:22"></td>
      <!-- add min date so backdates with be disable-->

    </tr>
    <tr>
      <td>
        <label for="mainted">Maintenance End Date (<%=tzShort%>)</label>
      </td>
      <td>
        <input style="border:1px solid grey; width: 100%" type="datetime-local" id="mainted" required="true" name="mainted" value="2020-08-19T10:22" min="2020-08-12T10:22">

      </td>
    </tr>
  </table>
  <p id="error" style="color:red"></p>
  <input type="submit">
</form>

Upvotes: 1

Related Questions