Quiero que el usuario no pueda elegir fechas anteriores, estoy usando la función .min pero no hace nada. Si pudieras ayudarme.
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; }El formato para min (y max) es aaaa-mm-dd... ya que May es un solo dígito (5), el min se ignora
quieres que min sea 2022-05-11 no 2022-5-11
La solución más simple a su código es usar toString y padStart para el componente de mes y día
Tenga en cuenta que agregó un día (como lo hace su código) ANTES de obtener año/mes/día ... ya que su forma de hacerlo fallaría el último día del mes por razones obvias, ¡ya que no hay 32 de mayo, por ejemplo! !
Por supuesto, si se supone que la fecha "mínima" es hoy, simplemente NO incluya esa línea de código: su código implica que debería ser mañana (aunque se haya hecho incorrectamente), pero su pregunta indica "fechas anteriores", lo que implica que HOY es un válido elección, por lo tanto, debe decidir si esa línea está incluida o no, ya que su pregunta implica AMBOS
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" />Alternativa: así es como yo lo haría
Aproveche el hecho de que la cadena de fecha fr-CA es 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" />Simplemente haz:
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" /> Si no desea codificar nada con el desplazamiento de la zona horaria,
el Html5 lo hace por ti:
const inputFecha = document.querySelector('#fecha') deshabilitarFechasAnterior(); function deshabilitarFechasAnterior() { inputFecha.valueAsDate = new Date() inputFecha.min = inputFecha.value } <input type="date" id="fecha" />Usando 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" /> Usando HTML agregando atributos mínimos/máximos.
<input id="fecha" type="date" min="2022-05-10" max="2022-05-25" />