Question 316602 in Html Question posted in
Some basic documentation can be found here.

How to Check if The End Date is Bigger Than The Start Date Using Script in HTML?

i want to Check if The End Date Is Bigger Than The Start Date , i had add an HTML Code to Get the Date Entered, and also i have wrote this Script to Check the if the End Date is bigger Than the Start Date.

// Function to check if the DateFin is Bigger Than The DateDebut
document.getElementById('DateFin').addEventListener('change', function() {
  var dateDebut = document.getElementById('DateFin').value.trim();
  var dateFin = document.getElementById('DateFin').value.trim();

  if (isNaN(dateFin) || dateFin < dateDebut) {
    document.getElementById('error-message').innerText = "The End Date must be greater than or equal to the Start Date";
    document.getElementById('DateDebut').value = "";
    document.getElementById('DateFin').value = "";
  } else {
    document.getElementById('error-message').innerText = "";
  }
});
<div class="mb-3">
  <label for="datadebut" class="form-label text_color">Date de Début :</label>
  <input type="date" class="text_color btn_designBtn bold-border-label form-control" id="DateDebut" name="searchDateDebut" value="{{ $searchDateDebut ?? '' }}">
  <div></div>
</div>

<div class="mb-3">
  <label for="datafin" class="form-label text_color">Date de Fin :</label>
  <input type="text" class="text_color btn_designBtn bold-border-label form-control" id="DateFin" name="searchDateFin" placeholder="jj/mm/yyyy">
  <div id="error-message" style="color: red;"></div>
</div>

But When i try the write the full End Date the Script is executed directly whiout a finish write the year example : i try to write the : startDate = 15/01/2024
and when i write the endDate = 15/01/2 < Whiout finish the year > the Script is executed directly and i got the message Error :

document.getElementById('error-message').innerText = "The End Date must be greater than or equal to the Start Date";

Can You help me please ? i’m stake in this Scripts…

Find a solution for my question please

Tags:

2

Answers


  1. 0

    simply do a compare on dates delta => a negative values implies your test…

    PS: it is useless and above all counterproductive not to use the automatic validation of HTML5 forms which only require the addition of a required attribute to ensure the conformity of the entries (empty fields, non-compliant values, etc.).

    const
  myForm = document.querySelector('#my-form-id')
, errMsg = { DateFin : `The End Date must be greater than or equal to the Start Date` }
, setError = elm =>
    {
    elm.setCustomValidity( errMsg[elm.name]);
    elm.oninput =_=>
      {
      elm.setCustomValidity(''); // clear error message
      elm.oninput = null;        // self remove setError assignation
      }
    };

myForm.onsubmit = e =>
  {
  if ( (myForm.DateFin.valueAsDate - myForm.DateDebut.valueAsDate) < 0 )
    {
    setError( myForm.DateFin );
    myForm.reportValidity();
    e.preventDefault();
    return false
    }
  console.clear();
  console.log( 'dates are OK' );
 
  e.preventDefault();
  }
    label {
  display   : block;
  margin    : .6rem 0;
  font-size : .8rem;
  }
label > input {
  display   : block;
  font-size : 1.2rem;
  width     : 12rem;
  }
input[name="Question"] {
  width     : 40em; 
  }
button {
  width: 6em;
  }
    <form action="" id="my-form-id">
  <label> 
    Date de Début :
    <input name="DateDebut" type="date" required >
  </label>
  <label>
    Date de Fin :
    <input name="DateFin" type="date" required  >
  </label>

  <button>Submit</button>
  <button type="reset">Reset</button>
</form>
    Login or Signup to reply.
  2. 0

    Change both inputs to type="date". Then the values will be in the format YYYY-MM-DD, which you can compare properly.

    Don’t use the change event. For some reason, this triggers in Chrome while you’re typing the year part of the date, so it will get an incomplete year. I’ve added a separate button to check the dates.

    To check whether the dates have been filled in, check whether they’re non-empty strings. isNaN() is only for numbers, not dates.

    // Function to check if the DateFin is Bigger Than The DateDebut
document.getElementById('check').addEventListener('click', function() {
  var dateDebut = document.getElementById('DateDebut').value.trim();
  var dateFin = document.getElementById('DateFin').value.trim();
  if (dateDebut && dateFin) { // only check when both inputs filled in
    if (dateFin < dateDebut) {
      document.getElementById('error-message').innerText = "The End Date must be greater than or equal to the Start Date";
      document.getElementById('DateDebut').value = "";
      document.getElementById('DateFin').value = "";
    } else {
      document.getElementById('error-message').innerText = "OK";
    }
  }
});
    <div class="mb-3">
  <label for="datadebut" class="form-label text_color">Date de Début :</label>
  <input type="date" class="text_color btn_designBtn bold-border-label form-control" id="DateDebut" name="searchDateDebut" value="2020-01-01">
  <div></div>
</div>

<div class="mb-3">
  <label for="datafin" class="form-label text_color">Date de Fin :</label>
  <input type="date" class="text_color btn_designBtn bold-border-label form-control" id="DateFin" name="searchDateFin" placeholder="jj/mm/yyyy">
  <div id="error-message" style="color: red;"></div>
</div>
<button type="button" id="check">Check dates</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search