Próbuję ustawić minimalną datę wprowadzania daty HTML5 na podstawie wartości ustawionej w innym polu wprowadzania daty HTML5.

Jeśli więc wybierzesz 3 kwietnia 2020 r. W pierwszym polu daty, wartością min drugiego wpisu daty będzie 3 kwietnia 2020 r.

Próbowałem użyć wartości pierwszego wejścia daty, ale to nie działa. Wszelkie sugestie byłyby świetne.

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">
2
JGee 3 kwiecień 2020, 14:22

3 odpowiedzi

Najlepsza odpowiedź

Zmień datę na aktualną

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

Do

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">
1
Bendar 3 kwiecień 2020, 11:30

Twoja logika nie działa, ponieważ ustawiasz min na fDate, a nie tDate.

Należy również unikać stosowania atrybutów zdarzeń wbudowanych onX, ponieważ są one nieaktualne i nie są już dobrą praktyką. Zamiast tego użyj dyskretnych programów obsługi zdarzeń. Logikę można jeszcze bardziej uprościć, ponieważ min akceptuje obiekt Date, więc nie ma potrzeby hakowania wokół obiektu Date, aby utworzyć ciąg.

Warto również zauważyć, że ustawienie min nie powstrzymuje użytkownika przed wprowadzeniem daty przed tą wartością. Jest używany tylko do weryfikacji po przesłaniu formularza, jak widać w poniższym przykładzie po kliknięciu przycisku 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>
0
Rory McCrossan 3 kwiecień 2020, 11:36

Chcesz ustawić minimalną wartość na drugi datepicker, więc musisz pobrać ten element:

function myFunction() {
  var minToDate = document.getElementById("fDate").value;
  document.getElementById("tDate").setAttribute("min", minToDate);
}
0
GoranLegenda 3 kwiecień 2020, 11:28