одна дата за другой в формате datetime-local

Я хочу использовать datetime-local для ввода даты времени для 2 дат. Ввод первой даты (id= ‘fd’):

<input type="datetime-local" id='fd' name="firstDate">
<script>
var date = new Date(),
fd = document.getElementById('fd');
fd.value = date.toISOString();  
</script>

и я хочу вторую дату (id=’sd’) поле ввода :

<input type="datetime-local" id='sd' name="secondDate">

разрешить только значения (даты), которые находятся после первой даты (id=’fd’).Любая помощь будет оценена .

2 ответа

  1. Использование JQuery может помочь вам.
    С помощью этой проверки можно игнорировать дальнейшие действия.

    var date = new Date();
    var fd = document.getElementById('fd');
    fd.value = date.toISOString();
    
    $(document).ready(function() {
      $('#sd').focusout(function() {
        var sdVal = $(this).val();
        if (sdVal > fd.value)
          alert("Dude! I'm bigger than you!");
      });
    });
    
  2. Listen changeevent offd, and set minattribute to sd. Мы можем ожидать, что браузеры не позволяют пользователям указывать более ранние даты. (I found desktop Chrome позволяет указывать даты раньше, чем minатрибут. Поэтому нам нужно сравнить valueAsNumber при отправке или включить интерактивную проверку формы.)

    document.querySelector('#fd').addEventListener('change', function(event) {
        if (event.target.value.length == 0)
            return;
        // Allow one minute after the first date, or later.
        var min = event.target.valueAsNumber + 60 * 1000;
        var minString = new Date(min).toISOString();
        // Remove ':ss.sssZ'.
        minString = minString.substr(0, minString.length - 8);
        document.querySelector('#sd').min = minString;
    }, false);
    

    Мы должны позаботиться о случае, когда пользователь указывает дату для sdпервого.