FilterDate

El componente FilterDate permite filtrar datos por fecha o por rango de fechas. Ofrece opciones configurables para seleccionar fechas, personalizar el formato, y manejar acciones mediante hooks como useData y useDate.

Ejemplo

Importación

Para importar el componente FilterDate, se puede hacer desde fenextjs

import { FilterDate } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Default	Descripcion
defaultValue	FilterDateDataProps	no	{}	Valor inicial del filtro de fecha, incluyendo tipo, fecha o rango de fechas.
onChange	(data: FilterDateDataProps) => void	no	undefined	Función que se ejecuta cuando cambia el valor del filtro de fecha.
formatDateOption	FenextjsDateFormatOptions	no	{}	Opciones de formato para mostrar las fechas seleccionadas.
textValue	string	no	'Filtrar por fecha:'	Texto principal que describe el propósito del filtro.
textFilterByDate	string	no	'Filtar por fecha'	Texto que se muestra para la opción de filtro por fecha.
textFilterByRange	string	no	'Filtar por rango'	Texto que se muestra para la opción de filtro por rango de fechas.
textBtnToday	string	no	'Hoy'	Texto del botón para seleccionar la fecha actual.
textBtnWeek	string	no	'Esta Semana'	Texto del botón para seleccionar la semana actual.
iconTrash	ReactNode	no	<SvgTrash />	Icono que se muestra como indicador para eliminar filtros.
extraListBtn	(data: ReturnType<typeof useData<FilterDateDataProps>>) => ReactNode[]	no	[]	Lista de botones personalizados que se pueden agregar dinámicamente.
nMonthShow	number	no	2	Número de meses visibles en el calendario.
className	string	no	''	Clase CSS para personalizar el contenedor principal.
classNameDropDown	DropDownClassProps	no	{}	Clase CSS para personalizar el menú desplegable.
classNameCollapse	InputCalendarClassProps	no	{}	Clase CSS para personalizar el calendario desplegable.
classNameBtnToday	ButtonClassProps	no	{}	Clase CSS para personalizar el botón 'Hoy'.
classNameBtnWeek	ButtonClassProps	no	{}	Clase CSS para personalizar el botón 'Esta Semana'.
classNameTextValue	Pick<TextProps, 'tag' \| 'className'>	no	{}	Clase CSS para personalizar el texto principal.
classNameTextSwich	Pick<TextProps, 'tag' \| 'className'>	no	{}	Clase CSS para personalizar los textos de los interruptores.
classNameInputSwich	InputSwichClassProps	no	{}	Clase CSS para personalizar los interruptores.
classNameContentTop	string	no	''	Clase CSS para personalizar el contenedor superior del contenido.
classNameLabelSwich	string	no	''	Clase CSS para personalizar las etiquetas de los interruptores.
classNameClear	string	no	''	Clase CSS para personalizar el icono de limpiar filtros.

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

Básico

<FilterDate />

Con valores iniciales

<FilterDate
  defaultValue={{ type: "range", dateRange: [new Date(), new Date()] }}
/>

Con botón extra

<FilterDate extraListBtn={[({ data }) => <button>Extra</button>]} />

Con formato personalizado

<FilterDate
  formatDateOption={{
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
  }}
/>

Simple Buttonmenu