Notify when the end date is earlier than start date

Question

I am developing a form that needs users to input the date of beginning and termination. How to make sure the end date is later than the start date? I plan to notify users by showing a hidden sentence when their inputs are not correct.

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

I can handle the comparison part but where I should utilize the comparison function?

this type of question has been around. Check this Q & A for your reference [Compare two dates with Java Script](https://stackoverflow.com/questions/492994/compare-two-dates-with-javascript) — Tamtomo Abdi Negoro, Jun 23 '21 at 01:35

score 2 · Accepted Answer · answered Jun 23 '21 at 01:41

Here's an example implementation. All you need to do is find a way to take the input values and turn them into an instead of Date. From there you can use the .valueOf() method, which gives you back a timestamp, which you can use to compare which date comes first.

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>

As for where you should use the comparison function, I would do so with the "onsubmit" event listener (when the user submits the whole form), or "onblur" (when the user clicks outside the input box). It can be annoying to have an error message popping at you while you're in the middle of trying to input something valid. I used onchange above to keep the demonstration of how to compare dates simple.

Saral Karki · Answer 2 · 2021-06-23T01:51:00.603

You can compare dates in javascript with operators like <,<=,>,>= with getTime() function. If you are using react, you can do like this

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

Well you can compare whether after value of start date and end date changes with useEffect or you can compare after submitting the form

luuchorocha · Answer 3 · 2021-06-23T01:43:16.837

You should convert the values to dates and compare them. First of all, add an ID to the inputs. Then, use it like follows:

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
}

EDIT

If you want to know where to use the function, then you don't know what you're doing. Use it in your validation function before submiting your form, or maybe with the blur event of the latest input. There are a lot of ways to do it. And the first one is being kind :)

Well I need to see how I can use the comparison function to control the displaying or not of the notice. — Memphis Meng, Jun 23 '21 at 01:40

Notify when the end date is earlier than start date

3 Answers3