<input type="date">

Los elementos de <input> del tipo date crean campos de entrada que permiten a los usuarios proporcionar una fecha, bien a través de un cuadro de texto que valida automáticamente el contenido, o bien mediante una interfaz especial de selección de fechas. El valor resultante incluye el año, el mes y el día, pero no la hora. Los tipos de entrada time y datetime-local admiten entradas de hora y de hora y fecha.

La IU del control varía en función del navegador. Por el momento, la compatibilidad es dispersa; consulte Compatibilidad entre navegadores para obtener más detalles. En los navegadores no compatibles, el control se degrada sin problemas a un sencillo <input type="text">.

<input id="date" type="date">

Entre los navegadores que admiten una interfaz personalizada para seleccionar fechas se encuentran Chrome y Opera, cuyo control luce así:

El control de fecha de Edge luce así:

El control de Firefox luce así:

Datepicker UI in firefox

Valor Una DOMString que representa una fecha en el formato AAAA-MM-DD, o nada
Eventos change e input
Atributos comunes admitidos autocomplete, list, readonly y step
Atributos IDL list, value, valueAsDate, valueAsNumber.
Métodos select(), stepDown(), stepUp()

Valor

Una DOMString que representa el valor de la fecha proporcionada en la entrada. Es posible establecer un valor predeterminado para la entrada al incluir una fecha en el atributo value, de esta manera:

<input id="date" type="date" value="2017-06-01">

Cabe destacar que el formato de fecha mostrado difiere del value en sí: el formato de fecha mostrado se escogerá en función de la configuración regional del navegador del usuario, aunque el value de fecha siempre se formatee como aaaa-mm-dd.

Es posible asimismo recuperar y establecer el valor de fecha en JavaScript mediante la propiedad value del elemento de entrada; por ejemplo:

var dateControl = document.querySelector('input[type="date"]');
dateControl.value = '2017-06-01';

Este código localiza el primer elemento <input> cuyo type sea date y define su valor a la fecha 2017-06-01 (1 de junio de 2017).

Atributos adicionales

Tenemos atributos adicionales tales como:

The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. Only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.

A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).

Note: When the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

Attribute Description
max La fecha máxima aceptada.
min La fecha minima aceptada.
step El intervalo a usar, como cuando das click en las flechas, de cuanto en cuanto va avanzar o retroceder.

max

La ultima fecha a aceptar. Si elvalue ingresado en el elemento esta después de esta fecha, el elemento cae constraint validation. Si el valor del max no es un valor valido, sigue el formato yyyy-MM-dd, donde el elemento no tiene máximo valor.

Este valor debe ser especificado mayor o igual especificado por min attribute.

min

La minima fecha aceptada; Una fecha menor que esta caera constraint validation. Si el valor es min el atributo no es valido y esa el formato yyyy-MM-dd, entonces el elemento no tiene valor minimo.

Este valor debe especificarse como menor o igualmax attribute.

step

The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. Only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.

A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).

Note: When the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

Para date input, el valor de step se da en dias, con una escala en factor de 86,400,000 (desde el valor numerico en millisegundos). El valor por defecto es step 1, indicando de un día a día.

Specifying any as a value for the step attribute makes the same effect as it were equal to 1 for date inputs.

Uso de las entradas de fecha

Las entradas de fecha suenan prácticas en un primer vistazo, ya que proveen una IU fácil de usar para seleccionar fechas y normalizan el formato de datos que se envía al servidor, sin importar la configuración regional del usuario. Sin embargo, existen problemas con <input type="date"> a causa de la compatibilidad limitada entre navegadores.

Estudiaremos usos básicos y complejos de <input type="date"> y, posteriormente, brindaremos consejos para mitigar el problema de compatibilidad entre navegadores (consulte Manejo de compatibilidad entre navegadores). Evidentemente, con el tiempo es esperable que la compatibilidad entre navegadores se amplíe, lo que hará desaparecer este problema.

Usos básicos de date

El uso más sencillo de <input type="date"> supone una combinación de un <input> básico y el elemento <label>, como se indica a continuación:

<form>
  <div>
    <label for="bday">Escriba su cumpleaños:</label>
    <input type="date" id="bday" name="bday">
  </div>
</form>

Definir los límites superior e inferior de la fecha

Puede utilizar los atributos min y max para restringir las fechas que el usuario puede seleccionar. En el ejemplo siguiente, definiremos como la fecha mínima 2017-04-01 y 2017-04-30 como la fecha máxima:

<form>
  <div>
    <label for="party">Elija la fecha de festejo que prefiera:</label>
    <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30">
  </div>
</form>

Como resultado, solo es posible seleccionar los días del mes de abril de 2017; solo la parte de los días del valor de texto es modificable, y no se puede desplazar a ninguna fecha que caiga fuera de abril en la interfaz de selección de fechas.

Nota: debería ser capaz de utilizar el atributo step para variar el número de días que se recorren con cada incremento de fecha (p. ej., puede que desee que solo se puedan seleccionar los sábados). No obstante, esto no parece funcionar en ninguna implementación en el momento en que se redactó esta página.

Controlar el tamaño de la entrada

<input type="date"> no admite los atributos de dimensionamiento de formularios como size. Deberá recurrir al CSS para satisfacer sus necesidades de dimensionamiento.

Validación

De manera predeterminada, <input type="date"> no aplica a ninguna validación a los valores introducidos. Las implementaciones de IU generalmente no le permiten escribir algo que no sea una fecha (lo cual es útil) pero aun así podrá dejar el campo vacío o incluso (en los navegadores que recurren al tipo text) escribir una fecha no válida (p. ej., el 32 de abril).

Si utiliza min y max para restringir las fechas disponibles (consulte Definir los límites superior e inferior de la fecha), los navegadores compatibles mostrarán un error si intenta enviar una fecha que se salga de los límites impuestos. No obstante, tendrá que comprobar los resultados para cerciorarse de que el valor esté dentro de los límites, ya que esta condición solo se hace cumplir si el dispositivo del usuario incluye compatibilidad completa con el selector de fecha.

Además, puede emplear el atributo required para que proporcionar la fecha sea obligatorio: de nuevo, se mostrará un error si intenta enviar un campo de fecha vacío. Esto, cuando menos, debería funcionar en la mayoría de los navegadores.

Estudie este ejemplo. Aquí hemos establecido las fechas mínima y máxima y convertimos el campo en obligatorio:

<form>
  <div>
    <label for="party">Elija la fecha de festejo que prefiera (obligatorio, del 1.º al 20 de abril):</label>
    <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required>
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit">
  </div>
</form>

Si intenta enviar el formulario sin una fecha (o con una fecha fuera de los límites definidos), el navegador muestra un error. Pruebe a manipular el ejemplo:

Esta captura de pantalla ayudará a aquellos que no utilicen un navegador compatible:

Aqui un codigo CSS usado en el siguiente ejemplo. Donde se hace uso de :valid:invalid Las propiedades en el estilo del "input" según el valor actual es o no valido. Se ponen iconos sobre el <span> al costado del input, no en el mismo cuadro del input, porque en Chrome el contenido generado se remplaza dentro del formulario de control, y este no puede ser personalizado o no se mostraria efectivamente.

div {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid+span:after {
    content: '✖';
    padding-left: 5px;
}

input:valid+span:after {
    content: '✓';
    padding-left: 5px;
}

Importante: El formulario de validación en HTML  no es un sustituto para los scripts que se aseguran que los datos esten ingresados en la forma correcta. Esto es demasiado facil para alguien que realiza ajustes en HTML que le permite pasar la validación, o quitarla de lleno. Es tambien posible para alguien simplificar el proceso de paso del formulario HTML enteramente y pasar la fecha directamente al servidor. Pero si en el lado de tu servidor fallase la validación al recibir la fecha, podria ocurrir un desastre cuando se envien los datos en el formato incorrecto (que la fecha sea muy larga, del tipo incorrecto, entre otras cosas más).

Manejo de compatibilidad entre navegadores

Como ya se menciono, el mayor problema al usar el "input" tipo date, es al momento de usar un navegador compatible. Ejemplo, el date picker en Firefox para Android luciria de la siguiente manera:

Pero los navegadores que no soportan lo remplazarian como un input del tipo texto, esto crea problemas en terminos de consistencia en relacion a la interfaz del usuario (El presente control seria diferente), y el manejo de datos también.

El segundo problema es más serio; como ya se menciono, con un input tipo date, el valor actual siempre se normaliza en el siguiente formato yyyy-mm-dd. Con un input tipo texto, por default el navegador no reconoce el formato en el que deberia estar, y hay muchisimas formas en las que las personas escriben el formato de fecha, Por ejemplo:

  • ddmmyyyy
  • dd/mm/yyyy
  • mm/dd/yyyy
  • dd-mm-yyyy
  • mm-dd-yyyy
  • Month dd yyyy

Una forma de evitar esto es usar un pattern, atributo que se pone en un input tipo date. A pesar de que la entrada tipo date no se usa, el input  tipo text si lo hará, gracias a este pattern.Mira el siguiente ejemplo en un navegador que no soporta entradas de tipo date:

<form>
  <div>
    <label for="bday">Enter your birthday:</label>
    <input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit">
  </div>
</form>

Si Ud. trata de enviar la fecha, verá que el navegador no despliega un mensaje de error (y considera el valor del input como valido) Si tu entrada en el input no concuerda con el patron establecido nnnn-nn-nn, donde n es un numero del 0 al 9. De seguro, que esto no frenara a las personas de ingresar valores incorrectos de tipo fecha, o formatos incorrectos, como yyyy-dd-mm (mientras que nosotros necesitamos: yyyy-mm-dd). por lo que aún seria un problema...

div {
  margin-bottom: 10px;
}

input:invalid + span {
  position: relative;
}

input:invalid + span:after {
  content: '✖';
  position: absolute;
  right: -18px;
}

input:valid + span {
  position: relative;
}

input:valid + span:after {
  content: '✓';
  position: absolute;
  right: -18px;
}

La mejor forma de lidiar con fechas en formularios en un navegador cruzado, es pedir al usuario que ingrese el mes, el año y el dia en inputs separados o en formatos de control separados, (<select> elementos que se han hecho populares; Mira abajo para ver la implementación), o usa una libreria de JavaScript como jQuery date picker.

Ejemplos

En este ejemplo creamos dos sets de elementos tipo UI para elegir fechas: uno nativo <input type="date"> y otro en un conjunto de tres <select> elementos para elegir la fecha en navegadores antiguos que no soportan un input nativo.

HTML

El codigo HTML se ve como:

<form>
    <div class="nativeDatePicker">
      <label for="bday">Enter your birthday:</label>
      <input type="date" id="bday" name="bday">
      <span class="validity"></span>
    </div>
    <p class="fallbackLabel">Enter your birthday:</p>
    <div class="fallbackDatePicker">
      <span>
        <label for="day">Day:</label>
        <select id="day" name="day">
        </select>
      </span>
      <span>
        <label for="month">Month:</label>
        <select id="month" name="month">
          <option selected>January</option>
          <option>February</option>
          <option>March</option>
          <option>April</option>
          <option>May</option>
          <option>June</option>
          <option>July</option>
          <option>August</option>
          <option>September</option>
          <option>October</option>
          <option>November</option>
          <option>December</option>
        </select>
      </span>
      <span>
        <label for="year">Year:</label>
        <select id="year" name="year">
        </select>
      </span>
    </div>
</form>

Los meses son codificados (como son siempre), mientras que el dia y el año son generados dinamicamente dependiendo del mes y el año seleccionado,  y el presente año (mira el codigo comentado para ver los detalles de la explicacion y como este funciona.)

input:invalid+span:after {
  content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  content: '✓';
  padding-left: 5px;
}

JavaScript

La otra parte del codigo que podria ser interesante es una caracteristica de detección de codigo— para detectar si el navegador soporta o no <input type="date">, creamos un nuevo <input>, seteado de type a date, inmediatamente verifica a que tipo corresponde— para navegadores que no soportan retornara un tipo text, porque el tipo date se volveria en tipo text. Si <input type="date"> no es soportado, escondemos el control nativo (datepicker nativo) y mostramos el selector tipo UI (<select>) en vez de este.

// define variables
var nativePicker = document.querySelector('.nativeDatePicker');
var fallbackPicker = document.querySelector('.fallbackDatePicker');
var fallbackLabel = document.querySelector('.fallbackLabel');

var yearSelect = document.querySelector('#year');
var monthSelect = document.querySelector('#month');
var daySelect = document.querySelector('#day');

// hide fallback initially
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';

// test whether a new date input falls back to a text input or not
var test = document.createElement('input');
test.type = 'date';

// if it does, run the code inside the if() {} block
if(test.type === 'text') {
  // hide the native picker and show the fallback
  nativePicker.style.display = 'none';
  fallbackPicker.style.display = 'block';
  fallbackLabel.style.display = 'block';

  // populate the days and years dynamically
  // (the months are always the same, therefore hardcoded)
  populateDays(monthSelect.value);
  populateYears();
}

function populateDays(month) {
  // delete the current set of <option> elements out of the
  // day <select>, ready for the next set to be injected
  while(daySelect.firstChild){
    daySelect.removeChild(daySelect.firstChild);
  }

  // Create variable to hold new number of days to inject
  var dayNum;

  // 31 or 30 days?
  if(month === 'January' || month === 'March' || month === 'May' || month === 'July' || month === 'August' || month === 'October' || month === 'December') {
    dayNum = 31;
  } else if(month === 'April' || month === 'June' || month === 'September' || month === 'November') {
    dayNum = 30;
  } else {
  // If month is February, calculate whether it is a leap year or not
    var year = yearSelect.value;
    (year - 2016) % 4 === 0 ? dayNum = 29 : dayNum = 28;
  }

  // inject the right number of new <option> elements into the day <select>
  for(i = 1; i <= dayNum; i++) {
    var option = document.createElement('option');
    option.textContent = i;
    daySelect.appendChild(option);
  }

  // if previous day has already been set, set daySelect's value
  // to that day, to avoid the day jumping back to 1 when you
  // change the year
  if(previousDay) {
    daySelect.value = previousDay;

    // If the previous day was set to a high number, say 31, and then
    // you chose a month with less total days in it (e.g. February),
    // this part of the code ensures that the highest day available
    // is selected, rather than showing a blank daySelect
    if(daySelect.value === "") {
      daySelect.value = previousDay - 1;
    }

    if(daySelect.value === "") {
      daySelect.value = previousDay - 2;
    }

    if(daySelect.value === "") {
      daySelect.value = previousDay - 3;
    }
  }
}

function populateYears() {
  // get this year as a number
  var date = new Date();
  var year = date.getFullYear();

  // Make this year, and the 100 years before it available in the year <select>
  for(var i = 0; i <= 100; i++) {
    var option = document.createElement('option');
    option.textContent = year-i;
    yearSelect.appendChild(option);
  }
}

// when the month or year <select> values are changed, rerun populateDays()
// in case the change affected the number of available days
yearSelect.onchange = function() {
  populateDays(monthSelect.value);
}

monthSelect.onchange = function() {
  populateDays(monthSelect.value);
}

//preserve day selection
var previousDay;

// update what day has been set to previously
// see end of populateDays() for usage
daySelect.onchange = function() {
  previousDay = daySelect.value;
}

Nota: Recuerda que algunos años tienen 53 semanas (año bisiesto) (Mira Semanas por año)! Tendras que tener esto en consideración cuando desarrolles apps o funciones.

Especificaciones

Especificación Estado Comentarios
HTML Living Standard
La definición de '<input type="date">' en esta especificación.
Living Standard
HTML5
La definición de '<input type="date">' en esta especificación.
Recommendation

Compatibilidad entre navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 20 12 57 (57) Sin soporte 10.62 Sin soporte[1]
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) 57.0 (57) ? 10.62 5

[1] Reconoce pero no tiene UI.

Véase también