input type=”date”

La etiqueta <input> en HTML teniendo el valor  'date' en su atributo type, input type=”date” esto simboliza a un campo de fecha. En la actualidad los navegadores modernos el control de fechas son en su mayoría representados con controles que le permite al usuario final cambiar su valor de manera gráfica, El ejemplo claro estar en un calendario, esto automatiza el proceso de estar ingresando directamente como una cadena.

Para el envío de datos del formulario, los navegadores actuales que soportan este mecanismo convierte la información ingresada de un usuario una cadena que simboliza una fecha, la composición de la fecha trae el reglas que se mencionan a continuación.

composición de una fecha  03-06-2020

• 03: representa día, en su mayoría esta entre 1 al 31.
• 06: representa mes, esta entre 1 al 12.
• 2020: representa año.
• el signo separador (-).

Ejemplo

En este presente ejemplo tenemos un formulario <form> con el campo de una fecha, en aquí usted podrá ver su funcionalidad de este control.

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

Siguiendo con el ejemplo de input type=”date”, haremos el uso de la etiqueta <datalist>, con esta etiqueta estaremos facilitando una lista de valores, de esta manera estaremos facilitando el trabajo del usuario final para que seleccione rápidamente los valores sugeridos, la funcionalidad de ésta etiqueta <datalist> es que coinciden el atributo ID de la lista con el atributo list del control de fecha.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend>date</legend>
        <p>Campo de fecha: <br>
            <input type="date" name="fecha" list="lista">
        <input type="submit" value="Enviar">
         </p>
    </fieldset>
</form>
<datalist id="lista">
    <option value="2020-03-06"></option>
    <option value="2020-03-25"></option>
    <option value="2020-03-12"></option>
    <option value="2020-03-19"></option>
    <option value="2020-03-16"></option>
</datalist>

Último ejemplo de input type=”date”, haremos uso de los atributos min, max y step, estos atributos nos permitirá poner restricciones a los valores del campo, así que el usuario final podrá seleccionar sólo los rangos que hemos puesto en este ejemplo. el valor de mínimo de la fecha a seccionar es 2020-03-06 y el máximo es 2020-03-09 y al final tenemos el valor inicial que pusimos al atributo step.

<form style="background-color: #3f6a9e;">
    <fieldset>
        <legend>date</legend>
        <p>Campo de fecha: <br>
            <input type="date" name="fecha" min="2020-03-06" max="2020-03-09">
        <input type="submit" value="Enviar">
         </p>
    </fieldset>
</form>