Date Picker
El componente e-date-picker resuelve seleccion de dia, mes y anio con navegacion amigable por teclado, estado de vista controlado, rangos resaltados y reglas de fechas deshabilitadas.
Usa esta pagina para validar flujos de agenda, comparar modos de navegacion y conectar seleccion de fechas restringidas a formularios de produccion con comportamiento predecible.
Uso
Explora como color, elevation, landscape, grid-button-elevation y no-title definen Date Picker, y previsualiza su efecto combinado antes de aplicar la configuracion en tu interfaz.
Fechas deshabilitadas y resaltadas
Usa reglas disabled para impedir la seleccion de fechas no disponibles, y reglas highlighted para resaltar fechas importantes o ventanas de agenda sin bloquearlas.
Reglas de bloqueo de agenda
Bloquea fines de semana y del 20 al 25 de agosto.
Ventanas visibles de agenda
Resalta releases y la ventana de aprobacion.
Internacionalizacion
Usa lng para mostrar las etiquetas del calendario, los nombres de los meses y los dias de la semana en un idioma distinto al locale global de la aplicacion.
Calendario en espanol
Las etiquetas y los nombres de los meses se muestran en espanol.
Calendario en frances
Las etiquetas y los nombres de los meses se muestran en frances.
Integracion
Combina Date Picker con un ETextfield de solo lectura y muestralo en un EDialog o EMenu. La prop close-on-change cierra la superficie activa despues de seleccionar.
Props
Usa la tabla de API como fuente de verdad para tipos aceptados, defaults y los principales comportamientos de agenda expuestos por Date Picker.
| Propiedad | Tipo | Por defecto |
|---|---|---|
| modelValue | Date | string | undefined |
Valor de fecha seleccionado actualmente. Acepta Date o un string de fecha que el componente pueda normalizar. | ||
| view | datePickerViewType | undefined |
Controla la profundidad activa de navegacion. Combinala con update:view para un picker totalmente controlado. | ||
| disabled / highlighted | DatesConfiguration | undefined / undefined |
Objetos de configuracion de fechas usados para bloquear seleccion y resaltar fechas o rangos importantes. | ||
| weekStart | number | 1 |
Define el primer dia visible de la semana, donde 0 es domingo y 1 es lunes. | ||
| format | string | undefined |
Cadena de tokens para personalizar el formato del header principal. | ||
| lng | suportedLng | locale global |
Sobrescribe el locale usado para resolver nombres de meses y dias en esta instancia del picker. | ||
| landscape | boolean | false |
Cambia el picker a su layout horizontal landscape. | ||
| noTitle | boolean | false |
Oculta el bloque superior que muestra el anio seleccionado y la fecha formateada. | ||
| onlyMonth / onlyYear | boolean | false / false |
Restringe la navegacion a flujos de seleccion solo por mes o solo por anio. | ||
| closeOnChange | boolean | false |
Cierra inmediatamente el dialog o menu contenedor despues de una seleccion valida. | ||
| iconPrev / iconNext | string | IconPath | IconPath[] | undefined |
Reemplaza los iconos de navegacion anterior y siguiente en el header. | ||
| color | string | "primary" |
Color semantico base aplicado a estados seleccionados y resaltados del picker. | ||
| elevation / gridButtonElevation | ElevationLevel | undefined / undefined |
Aplica elevacion a la superficie del picker y a los botones seleccionados del grid. | ||