Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


Date input HTML5: Un sencillo datepicker para tu formulario

Repaso al nuevo date input HTML5, este nuevo input nos va a ahorrar numerosas líneas de código para crear datepickers en formularios web.

De esta manera podemos ahorrarnos los plugins de jQuery para utilizar calendarios y/o datepickers en nuestras web.

En este post tenéis listados los diferentes inputs HTML5 para manejar fechas:

Sintaxis de Date input HTML5

Veamos la sintaxis de este input HTML5 extraída de su web oficial:

Como podréis ver la sintaxis es muy sencilla, os pongo varias de las opciones y parámetros más usados:

  • El formato de fecha devuelto por defecto es AAAA-MM-DD.
  • Se puede configurar un mínimo de fecha a seleccionar con el atributo ‘min‘:
    min=»2013-10-08″.
  • Se puede configurar un máximo de fecha a seleccionar con el atributo ‘max‘:
    min=»2014-10-08″.
  • Con el atributo ‘value‘ se puede poner una fecha por defecto en el calendario:
    value=»2013-10-08″.
  • Con el atributo ‘step‘ puedes establecer el avance o retroceso de días con las flechas del calendario.

Os voy a mostrar una imagen de ejemplo del date input HTML5 realizado en Chrome.

date input html5En la imagen se aprecia que el calendario HTML5 marca la fecha del input y posee varios botones en modo de flechas para avanzar y retroceder en días y meses.

Tampoco es que sea perfecto el datepicker, por ejemplo no se pueden seleccionar intervalos de fechas o días sueltos. Espero que sigan mejorándolo.

Ejemplo de date input HTML5

He realizado este ejemplo para ver en funcionamiento de este nuevo input:

Os explico el ejemplo:

  • min‘: Para que la fecha mínima sea el 1 de enero 2013.
  • max‘: Para que la fecha máxima sea el 31 de diciembre 2013.
  • value‘: Fecha por defecto el 1 de enero 2013.
  • step‘: Para que el avance sel intervalo de los días sea de 1 en 1.

Poner la fecha actual por defecto con la ayuda de PHP date()

En este segundo ejemplo vamos a poner por defecto la fecha actual con la ayuda de la función de PHP date():

Como podéis ver en el campo value he metido la llamada a PHP date() y he pasado los parámetros necesarios para respetar el formato AAAA-MM-DD.

Atributos válidos en date input HTML5

Voy a listaros los atributos válidos para este input según la W3C.

  1. name: Nombre del input (name=»nombre del input»).
  2. disabled: Atributo que determina si está desactivado el input para la introducción de datos (disable=»disabled»), por defecto activado.
  3. type: tipo de input, en este caso es ‘date’
  4. form: Con este atributo se asocia el id del form al que pertenece el input (form=»id del form»).
  5. autocomplete: Con autocomplete activado el input se autorrellenará con contenidos anteriormente enviados por él mismo (autocomplete=»off», autocomplete=»on»).
  6. autofocus: Este atributo hace que el cursor se situe en en input (autofocus=»autofocus»).
  7. list: Asocia mediante id una lista de valores predefinidos (list=»nombre lista»).
  8. readonly: Con el valor activado el input no podrá variar de valor, no se podrá editar (readonly=»readonly»).
  9. required: Determina si el input tiene que ser rellenado obligatoriamente (required=»required»).
  10. value: Valor por defecto del input.
  11. min: Valor mínimo de la fecha.
  12. max: Valor máximo de la fecha.
  13. step: Valor del intervalo de fechas.
  14. novalidate: Hace que el input no se valide al enviarse el formulario.

Listado de los nuevos input HTML5

En esta url tenéis el listado completo de los nuevos input de HTML5.

Listado de los nuevos atributos HTML5

En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies