We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

 

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
Sucesos 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).

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 aplicaninguna 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:

Here's the CSS used in the above example. Here we make use of the :valid and :invalid CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a <span> next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.

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

Important: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format.  It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).

Manejo de compatibilidad entre navegadores

As mentioned above, the major problem with using date inputs at the time of writing is browser support. As an example, the date picker on Firefox for Android looks like this:

Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.

The second problem is the more serious of the two; as we mentioned earlier, with a date input, the actual value is always normalized to the format yyyy-mm-dd. With a text input on the other hand, by default the browser has no recognition of what format the date should be in, and there are lots of different ways in which people write dates, for example:

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

One way around this is to put a pattern attribute on your date input. Even though the date input doesn't use it, the text input fallback will. For example, try viewing the following example in a non-supporting browser:

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

If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern nnnn-nn-nn, where n is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates, such as yyyy-dd-mm (whereas we want yyyy-mm-dd). So we still have a problem.

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

The best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the day, month, and year in separate controls (<select> elements being popular; see below for an implementation), or to use a JavaScript library such as jQuery date picker.

Ejemplos

In this example we create two sets of UI elements for choosing dates: a native <input type="date"> picker and a set of three <select> elements for choosing dates in older browsers that don't support the native input.

HTML

The HTML looks like so:

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

The months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year (see the code comments below for detailed explanations of how these functions work.)

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

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

JavaScript

The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <input type="date">, we create a new <input> element, set its type to date, then immediately check what its type is set to — non-supporting browsers will return text, because the date type falls back to type text. If <input type="date"> is not supported, we hide the native picker and show the fallback picker UI (<select>) instead.

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

Note: Remember that some years have 53 weeks in them (see Weeks per year)! You'll need to take this into consideration when developing production apps.

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] It is recognized but there is no UI.

Véase también

 

  •  

Etiquetas y colaboradores del documento

Colaboradores en esta página: fitojb
Última actualización por: fitojb,