Flat picker un plugin para mostrar calendarios en inputs html

Flat picker un plugin para mostrar calendarios en inputs html, aunque la mayoría de los elementos calendario se resuelven con un html input muchas veces no es de un agrado general.

<input type="date" name="bday">

Para manipular el calendario html es necesario tener conocimiento muy especializado en css, buen pues aquí te dejamos un plugin para que uses el calendario de una forma muy amigable, adaptable y compatible con todos los navegadores.

Una de las características que tiene este plugin es la siguiente:

  1. Selector de fecha y hora de soporte nativo para móviles
  2. iconos SVG fuera de la caja
  3. Compatible con jQuery
  4. Nuevo analizador DateString
  5. Desempeño mejorado Sólo 6 kb minified y gzip
  6. Ni una sola dependencia

Sitio: https://chmln.github.io/flatpickr/

1.- Para el uso de este plugin es necesario incluir los siguientes archivos:


<link rel="stylesheet" type="text/css" href="/path/to/flatpickr.css">
<script src="/path/to/flatpickr.js"></script>

2.- Para crear el calendario es necesario utilizar los inputs de la siguiente forma “Para conservar el formato”

<input class=flatpickr data-date-format="d-m-Y">
<input class=flatpickr data-date-format="m/d/Y">
<input class=flatpickr data-date-format="l, F j, Y">

3.- Código jQuery para convertir los inputs en calendarios:

$(".calendar").flatpickr(); // jQuery

En general usar este plugin puede apoyarte a conservar un diseño muy llamativo, para implementar más funcionalidades de este plugin puedes visitar el sitio donde se muestran varios ejemplos de uso: https://chmln.github.io/flatpickr/ la mayoria de los ejemplos son muy claros y sencillos de implementar ya que se hace sobre los elementos input referenciados.

Tiene 23 formas de implementarse en un proyecto web.

You may also like...