Date Picker
Los selectores de fecha ayudan a los usuarios a navegar por fechas pasadas, presentes y futuras. Los usuarios pueden seleccionar una fecha en particular a través del campo, adicionalmente pueden elegir entre año (desplegable), mes (controladores laterales) y día.
El selector de fecha se usa comúnmente en formularios.
Al seleccionar este campo (Date picker input), se abre el componente de calendario. Los usuarios también pueden ingresar fechas en el campo. Una vez que se selecciona una fecha, la opción se mostrará en el input field.
Playground
- Ruby
<%= f.label :starts_at, "Date Picker" %>
<%= f.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 |
| 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 datepicker funcionan igual que un helper de un formulario de Rails. Por ejemplo:
En un formulario:
<%= f.date_picker_field :starts_at %>
En un formulario con opciones:
<%= f.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:
<%= 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 %>
Características adicionales
- Puedes ingresar la fecha como un input de texto escribiendo sobre el placeholder DD/MM/YYYY.
- Puedes desplegar el calendario apretando el ícono.
- La selección funciona para una sola fecha.
- La traducción de los días, meses, años viene dada por MUI.
- La traducción del botón borrar se configuró con I18n en la buk-webapp.