How to make a datepicker the minimum day in javascript

Question

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;
    
}

Answer 1

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" />

Answer 2

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" />

Answer 3

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" />