Week input HTML5: Un nuevo input para insertar semanas

Último post sobre los nuevos input HTML5, con el nuevo week input de HTML5 termino de repasar todos estos nuevos elementos para los formularios de HTML5.

Tal y como el nombre indica este elemento sirve para la selección del número de semana de un determinado año.

El formato del valor devuelto es el siguiente: 2014-W07.

Sintaxis de week input HTML5

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

<input type="week" name="semana">

1	<input type="week" name="semana">

Como veis la sintaxis es sencilla y se parece mucho a otras como las de month input, time input, datetime input… Pero vamos a ver los atributos básicos con los que podemos trabajar:

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

Os muestro una imagen del elemento en Google Chrome, actualmente solo funciona en Chrome, Safari y Opera.

Ejemplo de week input HTML5

En esta demo de ejemplo de week input HTML5 podréis ver el sencillo funcinamiento y validaciones automáticas que hace sin necesidad de tirar líneas de código.

<form name="demo" action="/demos/2014/005-week-input-html5.php" method="POST">
	<input type="week" name="semana" min="2014-W01" max="2014-W16" value="2014-W01">
	<input type="submit" value="Enviar">
</form>

</form>

Explico el código superior:

He creado un formulario POST para enviar la semana y año
El valor week input de HTML5 tendrá que ser mayor que la primera semana de 2014, menor o igual que la semana 16 de 2014 y por defecto tendrá el valor de la primera semana de 2014.
Botón de enviar y posteriormente saco por pantalla el valor enviado.

Atributos válidos en week 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 ‘week’
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.