I want that the user can't choose previous dates, I'm using the .min function but it doesn't do anything. If you could help me.
function deshabilitarFechasAnterior(){
const inputFecha=document.querySelector('#fecha');
const fechaAhora= new Date();
const year=fechaAhora.getFullYear();
const mes=fechaAhora.getMonth()+1;
const dia=fechaAhora.getDate()+ 1;
const fechaDeshabilitar=`${year}-${mes}-${dia}`;
inputFecha.min=fechaDeshabilitar;
}
The format for min (and max) is yyyy-mm-dd ... since May is a single digit (5), the min is being ignored
you want min to be 2022-05-11 not 2022-5-11
Simplest fix to your code is by using toString and padStart for both month and day component
Note, added one day (like your code does) BEFORE getting year/month/day ... since your way of doing it would fail on the last day of the month for obvious reasons - since there is no 32nd of May for example!!
Of course, if "min" date is supposed to be today, simply DONT include that one line of code - your code implies it should be tomorrow (albeit done incorrectly) but your question states "previous dates", which implies TODAY is a valid choice - so, you must decide if that one line is included or not, since your question implies BOTH
function deshabilitarFechasAnterior() {
const inputFecha = document.querySelector('#fecha');
const fechaAhora = new Date();
// the next line makes the minimum date TOMORROW
fechaAhora.setDate(fechaAhora.getDate() + 1);
const year = fechaAhora.getFullYear();
const mes = (fechaAhora.getMonth() + 1).toString().padStart(2, '0');
const dia = (fechaAhora.getDate()).toString().padStart(2, '0');
const fechaDeshabilitar = `${year}-${mes}-${dia}`;
inputFecha.min = fechaDeshabilitar;
}
deshabilitarFechasAnterior();<input type="date" id="fecha" />Alternative - this is how I would go about it
Take advantage of the fact that fr-CA date string is yyyy-mm-dd
function deshabilitarFechasAnterior() {
const inputFecha = document.querySelector('#fecha');
const fechaAhora = new Date();
// the next line makes the minimum date TOMORROW
fechaAhora.setDate(fechaAhora.getDate() + 1);
inputFecha.min = fechaAhora.toLocaleDateString('fr-CA');
}
deshabilitarFechasAnterior();<input type="date" id="fecha" />Simply do:
const inputFecha = document.querySelector('#fecha')
deshabilitarFechasAnterior();
function deshabilitarFechasAnterior()
{
let dateMin = new Date()
dateMin.setMinutes(dateMin.getMinutes() - dateMin.getTimezoneOffset())
inputFecha.value = // to set default value too...
inputFecha.min = dateMin.toISOString().split('T')[0]
}<input type="date" id="fecha" />If you don't want to code anything with the time zone offset,
the Html5 do it for you:
const inputFecha = document.querySelector('#fecha')
deshabilitarFechasAnterior();
function deshabilitarFechasAnterior()
{
inputFecha.valueAsDate = new Date()
inputFecha.min = inputFecha.value
}<input type="date" id="fecha" />Using Javascript
function deshabilitarFechasAnterior() {
const inputFecha = document.querySelector('#fecha');
// To set a custom date as a minimum date, create date object for that date
// const fechaAhora = new Date("2022-05-11");
const fechaAhora = new Date(); // Default today's date
const year = fechaAhora.getFullYear();
const mes = (fechaAhora.getMonth() + 1).toString().padStart(2, '0');
const dia = (fechaAhora.getDate()).toString().padStart(2, '0');
const fechaDeshabilitar = `${year}-${mes}-${dia}`;
inputFecha.setAttribute("min", fechaDeshabilitar);
}
deshabilitarFechasAnterior();<input type="date" id="fecha" />Using HTML by adding min/max attributes.
<input id="fecha" type="date" min="2022-05-10" max="2022-05-25" />