Month input HTML5: Un campo de tipo mes para formularios

Otro nuevo input de HTML5, esta vez voy a hablar del month input HTML5 que tal y como el nombre indica es un campo de mes para formularios.

Anteriormente he hablado de otros input de fecha similares como date, datetime-local y datetime, la sintaxis de este input es muy similar a estos mencionados.

El valor devuelto es del siguiente formato: AAAA-MM es decir año y mes (2014-01).

Sintaxis de month input HTML5

La sintaxis de este input HTML5 según la W3C es la siguiente:

<input type="month" name="mes">

1	<input type="month" name="mes">

Sencilla sintaxis la del month input HTML5, os listo los atributos con los que podemos ‘jugar’ en este campo:

Se puede configurar un mínimo de fecha a seleccionar con el atributo ‘min‘:
min=»2013-12″.
Se puede configurar un máximo de fecha a seleccionar con el atributo ‘max‘:
min=»2014-12″.
Con el atributo ‘value‘ se puede poner el calendario con una fecha concreta por defecto:
value=»2013-10″.
Con el atributo ‘step‘ puedes establecer el avance o retroceso de meses con las flechas del calendario.

Os muestro la siguiente imagen de ejemplo sacada con el navegador Google Chrome:

Ejemplo de month input HTML5

Os he preparado esta demo de ejemplo de month input html5 para que podáis ver como se comporta este input con varios atributos para delimitar la fecha.

<form nanme="ejemplomonth" action="001-month-input-html5.php" method="POST">
	<input type="month" name="mes" step="1" min="2013-12" max="2014-12" value="2014-01" >
	<input type="submit" name="enviar" value="Enviar">
</form>

</form>

Os explico las líneas de código de la demo:

Creo un formulario en el que la url del ‘action‘ sea la misma demo.
Pongo el código del input type ‘month’.
Le añado un valor por defecto de 2014-01, un valor mínimo de 2013-12 y un máximo de 2014-12.
Termino poniendo un botón de enviar formulario.
Si el valor insertado es correcto saco por pantalla la fecha enviada.

Con estos atributos nuestro formulario solo aceptará valores entre el 2013-12 y 2014-12, de lo contrario saldrá un mensaje como el de la imagen inferior.

Atributos válidos en month input HTML5

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

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