input type=”week”

La etiqueta <input> en HTML, tiene como valor "week" en su atributo type, input type=”week” esto simboliza a un campo de entrada de una semana. En los navegadores actuales que soportan este mecanismo, este campo podría hacer simbolizadas por algunos controles qué le podrían permitir a los usuarios finales cambiar su valor de manera gráfica, un ejemplo claro es de un calendario, esto facilitar a los usuarios que ingresan directamente como una cadena.

Para el envío de datos del formulario, los navegadores actuales que soportan este mecanismo transforma la información ingresada por el usuario a una cadena que simboliza una semana. Para la composición de la semana tenemos las siguientes reglas válidas qué mencionamos a continuación.

composición de: semana 10, 2020

semana: representa al campo de semana

10: representa al numero del semana en lo que va el año

2020: representa el año.

Importante: Tener en cuenta que una semana empieza un lunes y es considerado como el período de 7 días.

Ejemplos

En este presente ejemplo tenemos un formulario <form> en el cual tenemos un control de semana básica, usted podrá ver las funcionalidades de input type=”week” en este ejemplo.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend> week</legend>
        <p>Campo semana: <br>
            <input type="week">
        </p>
        <input type="submit" value="Enviar">
    </fieldset>
</form>

Siguiendo con el ejemplo de input type=”week”, aquí facilitaremos una lista de valores para el campo de la semana, mediante la etiqueta <datalist>, esta funcionalidad ayudará al usuario final a seleccionar un valor rápidamente sugerido por el autor. Para que esto funcione correctamente la etiqueta <datalist> debe ser enlazados mediante el atributo ID de la lista y el atributo list del campo.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend> week</legend>
        <p>Campo semana: <br>
            <input type="week" list="lista">
        </p>
        <input type="submit" value="Enviar">
    </fieldset>
</form>
<datalist id="lista">
    <option value="2020-W10"></option>
    <option value="2020-W11"></option>
    <option value="2020-W23"></option>
    <option value="2020-W32"></option>
    <option value="2020-W45"></option>
</datalist>

Para finalizar con el ejemplo input type=”week” haremos uso de los atributos min, max y step, en caso de este ejemplo le damos un mínimo de 2020-W10 y como máxima semana 2020-W54, una restricción de que el usuario podrán seleccionar sólo entre estos rangos, mientras el atributos step especifica la semana para ser tomada como inicial.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend> week</legend>
        <p>Campo semana: <br>
            <input type="week" min="2020-W10" max="2020-W54" step="2" >
        </p>
        <input type="submit" value="Enviar">
    </fieldset>
</form>