Top 5: Los mejores Selectores de intervalos de fechas de código abierto

Top 5: Los mejores Selectores de intervalos de fechas de código abierto

Los paneles y los sistemas de reserva requieren un componente que le permita al usuario filtrar datos o encontrar algo de acuerdo con un filtro de fecha, proporcionando una fecha de inicio y finalización. Si ya trabajas con selectores de fechas estándar, la solución más fácil para implementar dicho componente sería simplemente crear 2 entradas e inicializar cada selector en ellas, la primera debería ser la fecha de inicio y la segunda la fecha de finalización. Funcionará y parece decente, sin embargo, si deseas ofrecer una mejor experiencia de usuario, un selector de rango de fechas sería excelente. Este tipo de componente permite al usuario simplemente seleccionar la fecha de inicio y finalización, generalmente arrastrando y soltando dentro de un solo elemento, en lugar de hacer clic en diferentes entradas (lo que lo hace muy intuitivo).

En esta compilación, compartiremos contigo 5 de los mejores componentes de selector de rango de fechas de código abierto que puedes usar en sus proyectos con JavaScript.

5. Lightpick

Vista previa

Litepicker Date Range Picker

Lightpick es la versión antigua y sin mantenimiento de Litepicker, no presenta dependencias y:

  • Fecha única o intervalo de fechas
  • Mostrar varios meses
  • Días mínimos / máximos para selecciones y / o fechas mínimas / máximas para selecciones
  • Seleccionar avance / retroceso
  • Modo en línea
  • Intervalo de fechas de repick
  • Días bloqueados / reservados

4. jQuery Date Range Picker

Vista Previa

jQuery Date Range Picker

jQuery Date Range Picker es un complemento de jQuery que permite a los usuarios seleccionar un rango de fechas. Requiere jQuery + 1.7, Moment + 2.8.1 (LICENCIA MIT). Admite IE8 +, Firefox, Chrome, Safari y otros navegadores HTML5 estándar. Admite varios idiomas, puede elegir un idioma definido o configurarlo en modo de detección automática. También puede definir nuevos idiomas para ello.  

Los DOM HTML generados tienen un estilo completamente CSS, puede cambiar la máscara editando el archivo CSS fácilmente. Aceptas más trabajos de personalización si necesita más funciones.

3. Hotel Datepicker

Vista Previa

Hotel Range Datepicker

Hotel Datepicker es un selector de rango de fechas de Javascript puro para hoteles. Requiere  Fecha 4.0.0  o superior y es compatible con todos los navegadores modernos.  

2. Litepicker

Vista previa

Litepicker Date Range Picker

Litepicker es un selector de rango de fechas liviano sin dependencias que presenta:

  • Caracteristicas
  • Sin dependencias
  • Fecha única o intervalo de fechas
  • Mostrar varios meses
  • Días mínimos / máximos para selecciones y / o fechas mínimas / máximas para selecciones
  • Seleccionar avance / retroceso
  • Modo en línea
  • Intervalo de fechas de repick
  • Días bloqueados / reservados

1. Date Range Picker

Vista Previa

Date Range Picker

Este componente selector de rango de fechas crea un menú desplegable desde el cual un usuario puede seleccionar un rango de fechas. Lo creé mientras creaba la interfaz de usuario para mejorar, que necesitaba una forma de seleccionar rangos de fechas para los informes. Las características incluyen la limitación del rango de fechas seleccionable, cadenas y formatos de fecha localizables, un modo de selector de fecha único, un selector de tiempo y rangos de fechas predefinidos.

Menciones honoríficas

React Infinite Calendar

Vista Previa

React Infinite Calendar (Date Range Picker)

React Infinite Calendar es un componente selector de rango de fechas muy completo y útil que presenta:

  •  Desplazamiento infinito : sigue desplazándote, sigue desplazándote
  • Flexible  : fecha mínima / máxima, fechas de discapacidad, días de discapacidad, etc.
  • Extensible  : agregue selección de rango de fechas, selección de fechas múltiples o cree su propia HOC.
  • Localización y traducción  - En français, s'il vous plaît!
  • Personalizable  : personalice un tema a su gusto.
  • Selección de año  : para saltar rápidamente de un año a otro
  • Soporte de teclado  - ⬆️ ⬇️ ⬆️ ⬇️ ⬅️ ➡️ ⬅️ ➡️ ↩️
  • Eventos y devoluciones de llamada  : beforeSelect, onSelect, onScroll, etc.
  • Móviles de usar  - sedoso desplazamiento suave en el móvil

Vue.js Range Date Picker

Vista previa

Vue.js Range Date Picker

El selector de fechas de rango de VueJS le ofrece un componente muy fácil de usar para seleccionar un rango de fechas.

Si conoces otro componente de selector de rango de fechas de código abierto increíble, compártelo con la comunidad en la caja de comentarios.

Esto podria interesarte

Conviertete en un programador más sociable