wiki-Date-Selector

Ver en Git

---

Date Selector

El componente DateSelector es un selector de fechas interactivo que permite al usuario seleccionar un día específico desde un calendario desplegable. Incluye funcionalidades para la navegación por meses, deshabilitación de fechas específicas, y personalización según el idioma. Es ideal para aplicaciones que requieran la entrada o selección de fechas de manera intuitiva.

Referencia de la API

Propiedad	Tipo	Predeterminado	Descripción
defaultValue	string (opcional)	undefined	Valor inicial predeterminado en formato ISO 8601 (ejemplo: YYYY-MM-DD).
value	string | number	undefined	Valor actual de la fecha seleccionada en formato ISO 8601 o timestamp.
onChange	(date: Date) => void	undefined	Función que se ejecuta cuando el usuario selecciona una fecha.
language	languagesT (opcional)	'es_AR'	Idioma del componente. Controla los textos y nombres de los meses en el calendario.
className	string (opcional)	undefined	Clase CSS adicional para personalizar el contenedor del componente.
disableFromToday	boolean (opcional)	false	Si es true, deshabilita todas las fechas anteriores a la fecha actual.
disabledDays	Date[] (opcional)	[]	Array de fechas específicas que estarán deshabilitadas y no podrán ser seleccionadas.
activeDates	string[] (opcional)	undefined	Lista de fechas específicas que se destacarán como "activas" en el calendario.

Ejemplo de Uso

import { useState } from 'react';
import { DateSelector } from '@auravant/ui-kit';

export const DateSelectorExample = () => {
 const [selectedDate, setSelectedDate] = useState<Date>();

 const handleDateChange = (date: Date) => {
 setSelectedDate(date);
 console.log('Fecha seleccionada:', date);
 };

 return (
 <DateSelector
 defaultValue="2025-01-01"
 onChange={handleDateChange}
 disableFromToday={true}
 disabledDays={[new Date('2025-01-15'), new Date('2025-01-20')]}
 language="en_US"
 className="custom-class"
 />
 );
};

Notas

• Estado Controlado: El componente es controlado externamente, pero también puede manejar un valor inicial mediante defaultValue.

• Formato de Fechas: El valor esperado para defaultValue y value debe estar en formato ISO 8601 o como timestamp. Las fechas deshabilitadas (disabledDays) deben ser objetos de tipo Date. Deshabilitación Dinámica: La prop disableFromToday desactiva dinámicamente las fechas anteriores a la actual.

• Personalización del Diseño: Se pueden aplicar estilos adicionales mediante las props className y style. Los nombres de los meses y los textos son traducibles mediante las traducciones internas o especificando un idioma.