Range Date Picker
El Rage-Picker es un selector diseñado para facilitar la selección de rangos de fechas en flujos que requieren filtrado de datos temporales, particularmente en el contexto de nuestras tablas Fiji.
Características Principales:
- Selector de Rangos de Fechas: Permite al usuario seleccionar un rango de fechas específico utilizando un calendario integrado, lo que facilita la selección precisa de períodos temporales.
- Integración con Filtros de Columnas: El Rage-Picker se integra de manera fluida como un filtro de columnas en nuestras tablas Fiji, permitiendo a los usuarios filtrar información basada en rangos de fechas.
- Prevención de Entrada Manual: Con el objetivo de mantener la integridad de los datos y evitar errores de entrada, el Rage-Picker no admite la entrada manual de fechas. En su lugar, los usuarios deben seleccionar las fechas utilizando el calendario proporcionado.
Playground
- Ruby
<%= f.label :starts_at, "Range Date Picker" %>
<%= f.range_date_picker_field :starts_at,
disabled_dates: [Date.new(2024, 06, 15), Date.new(2024, 06, 16)],
highlighted_dates: [Date.new(2024, 06, 20), Date.new(2024, 06, 21)],
min_date: Date.new(2024, 01, 01),
max_date: Date.new(2024, 12, 31)
%>
Lista de parámetros
| Propiedad | Tipo | Detalle |
|---|---|---|
| disable-weekends | Boolean | Si se establece en true, deshabilita la selección de fechas en fines de semana. |
| disabled-dates | String | JSON string de fechas deshabilitadas. Ejemplo: ["2024-06-15", "2024-06-16"]. |
| highlighted-dates | String | JSON string de fechas resaltadas. Ejemplo: ["2024-06-20", "2024-06-21"]. |
| min-date | String | Fecha mínima seleccionable en formato YYYY-MM-DD. Ejemplo: 2024-01-01. |
| max-date | String | Fecha máxima seleccionable en formato YYYY-MM-DD. Ejemplo: 2024-12-31. |
| disabled | Boolean | Indica si el campo está deshabilitado o no. |
| read_only | Boolean | Indica si el campo es de solo lectura |
| hint | String | Texto de ayuda que se muestra debajo del input |
| error_message | String | Mensaje de error que se muestra debajo del input |
Anatomía
Cómo Usar
Es un custom element, pero no se debe invocar de esa manera. Se crearon dos helpers para invocarlo. Los helpers del range-date-picker funcionan igual que un helper de un formulario de Rails. Por ejemplo:
En un formulario:
<%= f.range_date_picker_field :starts_at %>
En un formulario con opciones:
<%= f.range_date_picker_field :starts_at,
min_date: Date.new(2024, 1, 1),
max_date: Date.new(2024, 12, 31),
disabled_dates: [Date.new(2024, 5, 1)],
highlighted_dates: [Date.new(2024, 9, 18)],
disable_weekends: true %>
O, fuera de formularios:
<%= range_date_picker_field_tag :starts_at,
min_date: Date.new(2024,1,1),
max_date: Date.new(2024,12,31),
disabled_dates: [Date.new(2024,5,1)],
highlighted_dates: [Date.new(2024,9,18)],
disable_weekends: true %>
Incluido en Fiji - Vistas listar
Este componente viene integrado en todas las vistas listar de Fiji, permitiendo filtrar por fechas las columnas que contengan los tipos de datos date y datetime.
Por defecto, en Fiji no se pueden modificar sus parámetros. Los fines de semana vendrán siempre resaltados, no se permitirá deshabilitar fechas ni fines de semana.