Установить HTML5 Поле даты Минимальное значение на основе другого HTML5 Значение даты

Question

Я пытаюсь установить минимальную дату для ввода HTML5 Дата на основе значения, установленного в другом HTML5 Вводе даты.

Так что если вы выберете 3 апреля 2020 года в первом поле даты значение min для ввода второй даты будет 3 апреля 2020 года.

Я попытался использовать значение для ввода первой даты, но это не работает. Любые предложения будут великолепны.

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();

if (dd < 10) {
  dd = '0' + dd
}

if (mm < 10) {
  mm = '0' + mm
}

today = yyyy + '-' + mm + '-' + dd;
document.getElementById("fDate").setAttribute("min", today);

function myFunction() {
  var minToDate = document.getElementById("fDate").value;
  document.getElementById("fDate").setAttribute("min", minToDate);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input type="date" id="fDate" onBlur="myFunction()">
<input type="date" id="tDate">

Answer 1

Изменить fdate на tdate

document.getElementById("fDate").setAttribute("min", minToDate);

на

document.getElementById("tDate").setAttribute("min", minToDate);

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();

if (dd < 10) {
  dd = '0' + dd
}

if (mm < 10) {
  mm = '0' + mm
}

today = yyyy + '-' + mm + '-' + dd;
document.getElementById("fDate").setAttribute("min", today);

function myFunction() {
  var minToDate = document.getElementById("fDate").value;
  document.getElementById("tDate").setAttribute("min", minToDate);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input type="date" id="fDate" onBlur="myFunction()">
<input type="date" id="tDate">

Answer 2

Ваш лог c не работает, потому что вы устанавливаете мин на fDate, а не tDate.

Вам также следует избегать использования встроенных onX атрибутов событий, поскольку они устарели и больше не являются хорошей практикой. Вместо этого используйте ненавязчивые обработчики событий. Логика c может быть еще более упрощена, поскольку min принимает объект Date, поэтому вам не нужно взламывать объект Date, чтобы сформировать строку.

Стоит также отметить, что min настройка не останавливает пользователя, вводящего дату до этого значения. Он используется только для проверки при отправке формы, как вы можете видеть в следующем примере, когда нажата кнопка Submit.

let fDate = document.querySelector('#fDate');
let tDate = document.querySelector('#tDate');

fDate.addEventListener('change', function() {
  tDate.min = this.value;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form>
  <input type="date" id="fDate" />
  <input type="date" id="tDate" />
  <button>Submit</button>
</form>

Answer 3

Вы хотите установить минимальное значение для второго средства выбора даты, поэтому вам нужно получить этот элемент:

function myFunction() {
  var minToDate = document.getElementById("fDate").value;
  document.getElementById("tDate").setAttribute("min", minToDate);
}