如何使用 HTML 脚本检查结束日期是否大于开始日期？

Question

我想检查结束日期是否大于开始日期，我添加了一个 HTML 代码来获取输入的日期，并且我还编写了此脚本来检查结束日期是否大于开始日期。

// 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>

但是当我尝试写入完整的结束日期时，脚本会直接执行，而无需完成写入年份示例：我尝试写入：

startDate = 15/01/2024

当我编写

endDate = 15/01/2

< Whiout finish the year > 时，脚本会直接执行，我收到消息错误：

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

你能帮我吗？我对这个脚本有兴趣...

请为我的问题找到解决方案

Answer 1

只需对日期增量进行比较 => 负值意味着您的测试...

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>