Проверка формы с датами. Первая дата должна быть раньше, чем вторая дата.

Question

Я уже несколько дней пытаюсь найти решение. Я не силен в javascript и это меня смущает. Я хочу, чтобы кнопка отправки была отключена, если время начала не раньше времени окончания. Я могу сделать это так легко в PHP, но в этом случае мне нужно предотвратить отправку формы на стороне клиента. Я смог вычислить базовые c числа, но не дату. Я также хотел бы вставить сообщение в теги div с идентификатором сообщения.

<input type="datetime-local" name="start" id="start">
<input type="datetime-local" name="end" id="end">
<div id="message"></div>

<button type="submit" name="submit" id="submit">Click to Submit</button>

Answer 1

что-то вроде этого?

<form id="my-form">
  <input type="datetime-local" name="start" >
  <input type="datetime-local" name="end"  >
  <div id="message"></div>

  <button type="submit" name="btSubmit" disabled>Click to Submit</button>
</form>

const myForm = document.getElementById('my-form')

myForm.end.oninput=()=>
  {
  let d_start = (new Date(myForm.start.value)) || Infinity
    , d_end   = (new Date(myForm.end.value)) || 0

  myForm.btSubmit.disabled =( d_start > d_end)
  }

Answer 2

Это должно сработать:

<input type="datetime-local" name="start" id="start">
<input type="datetime-local" name="end" id="end">
<div id="message"></div>

<button type="submit" name="submit" id="submit">Click to Submit</button>
<script type="text/javascript">
  let startInput = document.getElementById('start');
  let endInput = document.getElementById('end');
  let messageDiv = document.getElementById('message');
  let submitButton = document.getElementById('submit');

  let compare = () => {
    let startValue = (new Date(startInput.value)).getTime();
    let endValue = (new Date(endInput.value)).getTime();

    if (endValue < startValue) {
      messageDiv.innerHTML = 'Start date must be before end date!';
      submitButton.disabled = true;
    } else {
      messageDiv.innerHTML = '';
      submitButton.disabled = false;
    }
  };

  startInput.addEventListener('change', compare);
  endInput.addEventListener('change', compare);
</script>

Сначала мы сохраняем все HTML элементы, которые нам нужны, в переменных. Затем мы объявляем функцию, которую запускаем при изменении любого ввода даты. Внутри этой функции мы проверяем, не предшествует ли дата окончания дате начала. Если это так, мы отображаем сообщение об ошибке и отключаем кнопку отправки; в противном случае мы скрываем сообщение об ошибке и включаем кнопку отправки.

Я запустил этот код, и он работает.

Прокомментируйте этот ответ, если у вас есть вопросы.