当结束日期早于开始日期时通知

Question

我正在开发一个需要用户输入开始和终止日期的表单。如何确保结束日期晚于开始日期？当用户输入不正确时，我计划通过显示隐藏语句来通知用户。

<input type="date" name="startDate" defaultValue={experienceToEdit.start_date} onChange={e => setStartDate(e.target.value)} value={startDate}></input>
<input type="date" name="endDate" defaultValue={experienceToEdit.end_date} onChange={e => setEndDate(e.target.value)} value={endDate}></input>

我可以处理比较部分，但我应该在哪里使用比较功能？

Answer 1

这是一个示例实现。您需要做的就是找到一种方法来获取输入值并将它们转换为一个而不是Date。从那里您可以使用.valueOf() 方法，它会返回一个时间戳，您可以使用它来比较哪个日期在前。

function dateStrToObj(dateStr) {
  const [year, month, date] = dateStr.split('-').map(Number)
  return new Date(year, month - 1, date)
}

function onChange() {
  const startDateStr = document.querySelector('#startDate').value
  const endDateStr = document.querySelector('#endDate').value
  
  if (!startDateStr || !endDateStr) return

  const startDate = dateStrToObj(startDateStr)
  const endDate = dateStrToObj(endDateStr)
  if (endDate.valueOf() < startDate.valueOf()) {
    console.error('End date is before start date!')
  }
}

for (const dateInput of document.querySelectorAll('input[type=date]')) {
  dateInput.addEventListener('change', onChange)
}

<input type="date" id="startDate"></input>
<input type="date" id="endDate"></input>

至于你应该在哪里使用比较功能，我会使用“onsubmit”事件监听器（当用户提交整个表单时）或“onblur”（当用户在输入框外点击时）。在您尝试输入有效内容的过程中出现错误消息可能会很烦人。我在上面使用了 onchange 来简化如何比较日期的演示。

Answer 2

您可以使用 getTime() 函数将 javascript 中的日期与 ,>= 等运算符进行比较。如果你正在使用 react，你可以这样做

const submitHandler = ()=>{         //After submitting form to check dates
  const newStartDate = new Date(startDate)
  const newEndDate = new Date(endDate)
  if(newStartDate.getTime() < newEndDate.getTime()){
  //Alert something
}
}

你可以用useEffect比较开始日期和结束日期的值是否发生变化，或者你可以在提交表单后进行比较

Answer 3

您应该将值转换为日期并进行比较。 首先，在输入中添加一个 ID。然后，像下面这样使用它：

const startDate = new Date(document.getElemenyById('startDateInput').value);
const endDate = new Date(document.getElemenyById('endDateInput').value);

if (endDate < startDate) {
    // Show an alert to your users, disable submit button, etc
}

编辑

如果您想知道在哪里使用该功能，那么您不知道自己在做什么。 在提交表单之前在您的验证功能中使用它，或者可能与最新输入的blur 事件一起使用。有很多方法可以做到这一点。第一个是善良:)