Podemos insertar un calendario básico con gran facilidad, solo vamos a necesitar una única línea de código: aprovechando el elemento input con un valor de type igual a date. Veamos un ejemplo:
<form> <input type=”date” id=”fecha” name=”fecha” required=”required”> </form>
La única desventaja aparente que posee el input type date es que no tiene aún un soporte completo por parte de los navegadores.
Únicamente el navegador Opera posee un amplio soporte para este elemento, el resto tan solo lo soportan parcialmente y únicamente en sus versiones más recientes. Como se ve en la imagen de arriba, el navegador nos mostrará el calendario desplegado y el usuario podrá seleccionar cualquier día del calendario.
Otras opciones del atributo date:
El atributo date tiene algunas otras variantes que permiten al usuario elegir opciones más restringidas del calendario. Por ejemplo, mediante los valores week y month podemos seleccionar una semana o un mes completo. Veamos cómo sería la sintaxis para cada caso.
Ejemplo para selección de mes:
<form> <input type=”month” id=”mes” name=”mes” required=”required”> </form>
Ejemplo para selección de semana:
<form> <input type=”week” id=”semana” name=”semana” required=”required”> </form>
Otras opciones para el calendario son los valores datetime y datetime-local para el atributo type. Estos nos permiten agregar, en un solo campo, el calendario para la fecha y el campo para ingresar el horario. Ejemplo para el atributo datetime:
<form> <input type=”datetime” id=”fecha” name=”fecha” required=”required”> </form>
Ejemplo para el atributo datetime-local:
<form> <input type=”datetime-local” id=”fecha” name=”fecha” required=”required”> </form>
La diferencia entre datetime y datetime-local es la zona horaria que utilizan. Solo algunos navegadores tienen soporte para estos atributos.
