Calendario en html5

Anteriormente el crear datepickers o calendarios era un poco tedioso, ahora HTML5 nos trae un nuevo tipo de input, el cual nos ahorrara muchas lineas de código y por ende ahorraremos tiempo a la hora de crear nuestros datepickers en nuestros sitios web.

Su sintaxis es muy sencilla y acoplable a muchas de las necesidades a las que frecuentemente nos encontramos desarrollando sitios web, donde se debe de incorporar formularios que se deban insertar fechas. Insertando tan solo <input type="date" name="fecha">, podremos obtener un calendario como nos muestra la siguiente imagen.

Algunos de los atributos mas utilizados con los que cuenta este nuevo tipo de input son los siguientes, teniendo en cuenta que el formato por defecto de fechas es AAAA-MM-DD "Año mes y día": 

• disabled: Indicamos si deseamos que nuestro campo del calendario este desactivado (disabled="disabled"), por defecto este campo se encuentra activo.
• id: Identificador único para el input.
• name: Nombre del input de nuestro formulario ("name="fecha").
• min: Indicamos la fecha mínima que aparecerá en nuestro calendario, ejemplo si deseamos que nuestro calendario muestre las fechas en retroceso hasta el 15 de Enero del año 2015, colocaremos min="2015-01-15".
• max: Indicamos la fecha máxima que deseamos que nuestro calendario muestre, si las fechas solo se podrán insertar hasta el 31 de Diciembre del año 2018 colocaríamos max="2018-12-31".
• value: Con esto indicamos una fecha por defecto la cual sera tomada si no indicamos una nueva fecha en nuestro calendario.
• step: Indicamos el intervalo de selección en nuestro calendario si colocamos step="3", solo podremos seleccionar las fechas ubicadas cada 3 casillas. Ejemplo si la casilla de la fecha 7 de enero del 2017 esta habilitada la siguiente casilla que podre seleccionar seria la del 10 de enero del 2017.

En el siguiente enlace podrán descargar un ejemplo.

Descargar

Ver ejemplo: