shadcn ui monthpicker

Mespicker & MontrangePicker para shadcn-ui

Un componente Monthpicker y Monthrangepicker totalmente personalizable creado para Shadcn-Ui. (Radix, CSS de viento de cola).

¡Prueba la demostración!

Instalación

Los componentes requieren los siguientes componentes shadcn-ui.

• Botón
• Popover (opcional)

Instalación de CLI:

 npx shadcn-ui@latest add button popover

Enlace a los componentes:

• Calzoncillo
• Mes

También Lucide React es requerido para los íconos.

Componente Monthpicker

Ejemplo

 import React from "react" ;
import { Popover , PopoverContent , PopoverTrigger } from "@/components/ui/popover" ;
import { Button } from "@/components/ui/button" ;
import { CalendarIcon } from "lucide-react" ;
import { format } from "date-fns/format" ;
import { cn } from "@/lib/utils" ;
import { MonthPicker } from "@/components/ui/monthpicker" ;

export default function Example ( ) {
    const [ date , setDate ] = React . useState < Date > ( ) ;

    return < MonthPicker onMonthSelect = { setDate } selectedDate = { date } / > ;
}

Úselo con el componente Shadcn-Ui Popover :

 export default function Example ( ) {
    const [ date , setDate ] = React . useState < Date > ( ) ;

    return (
        < Popover >
            < PopoverTrigger asChild >
                < Button variant = { "outline" } className = { cn ( "w-[280px] justify-start text-left font-normal" , ! date && "text-muted-foreground" ) } >
                    < CalendarIcon className = "mr-2 h-4 w-4" / >
                    { date ? format ( date , "MMM yyyy" ) : < span > Pick a month < / span > }
                < / Button >
            < / PopoverTrigger >
            < PopoverContent className = "w-auto p-0" >
                < MonthPicker onMonthSelect = { setDate } selectedMonth = { date } / >
            < / PopoverContent >
        < / Popover >
    ) ;
}

Accesorios

Apuntalar	Tipo	Por defecto	Descripción
onMonthSelect	(fecha: fecha) => nulo	-	Llamado cuando se ha seleccionado un mes
selectedMonth	Fecha	Mes de hoy	Estado mensual para la inicialización
minDate	Fecha	sin límite	La fecha mínima seleccionable
maxDate	Fecha	sin límite	La fecha máxima seleccionable
disabledDates	Fecha[]	-	Meses no selectables separados
callbacks	objeto	-	Ver tabla de devoluciones de llamada
variant	objeto	-	Ver tabla variante
onYearForward	() => nulo	-	Llamado cuando el calendario se adelantó
onYearBackward	() => nulo	-	Llamado cuando el calendario se revuelve hacia atrás

devoluciones de llamada

| Apuntalamiento | Tipo | Descripción | | ------------ | ------------------------ | --------------------------------- | | `YearLabel` | (año: número) => cadena | Utilizado para diseñar la etiqueta del año | | `Montlabel` | (Mes: mes) | Utilizado para diseñar las etiquetas del mes |

 type Month = { number : number ; name : string } ;

variante

Apuntalar	Tipo	Descripción
calendar	{ main: ButtonVariant, selected: ButtonVariant }	Estilo para los mes-buttons. main para el botón no seleccionado y selected para el botón seleccionado
chevrons	Buttonvariant	Estilización para los botones hacia atrás

 type ButtonVariant = "default" | "outline" | "ghost" | "link" | "destructive" | "secondary" | null | undefined ; 

Componente Monthrangepicker

Ejemplo

 import React from "react" ;
import { Popover , PopoverContent , PopoverTrigger } from "@/components/ui/popover" ;
import { Button } from "@/components/ui/button" ;
import { CalendarIcon } from "lucide-react" ;
import { format } from "date-fns/format" ;
import { cn } from "@/lib/utils" ;
import { MonthRangePicker } from "@/components/ui/monthrangepicker" ;

export default function Example ( ) {
    const [ dates , setDates ] = React . useState < { start : Date ; end : Date } > ( ) ;

    return < MonthRangePicker onMonthRangeSelect = { setDates } selectedMonthRange = { dates } / > ;
}

Úselo con el componente Shadcn-Ui Popover :

 export default function Example ( ) {
    const [ dates , setDates ] = React . useState < { start : Date ; end : Date } > ( ) ;

    return (
        < Popover >
            < PopoverTrigger asChild >
                < Button variant = { "outline" } className = { cn ( "w-[280px] justify-start text-left font-normal" , ! date && "text-muted-foreground" ) } >
                    < CalendarIcon className = "mr-2 h-4 w-4" / >
                    { dates ? ` ${ format ( dates . start , "MMM yyyy" ) } - ${ format ( dates . end , "MMM yyyy" ) } ` : < span > Pick a month range < / span>}
                < / Button>
            < / PopoverTrigger>
            < PopoverContent className = "w-auto p-0" >
                < MonthRangePicker onMonthRangeSelect = { setDates } selectedMonthRange = { dates } / >
            < / PopoverContent >
        < / Popover >
    ) ;
}

Accesorios

Apuntalar	Tipo	Por defecto	Descripción
onMonthRangeSelect	(fecha: fecha) => nulo	-	Llamado cuando se ha seleccionado un rango de mes
onStartMonthSelect	(fecha: fecha) => nulo	-	Llamado cuando se ha seleccionado el mes de inicio de rango y el final de la gama aún está pendiente
selectedMonthRange	Fecha	Mes de hoy	Estado mensual para la inicialización
minDate	Fecha	sin límite	La fecha mínima seleccionable
maxDate	Fecha	sin límite	La fecha máxima seleccionable
callbacks	objeto	-	Ver tabla de devoluciones de llamada
variant	objeto	-	Ver tabla variante
onYearForward	() => nulo	-	Llamado cuando el calendario se adelantó
onYearBackward	() => nulo	-	Llamado cuando el calendario se revuelve hacia atrás
quickSelectors	Objeto[]	-	Ver tabla de selectores rápidos
showQuickSelectors	booleano	verdadero	Mostrar/ocultar los selectores rápidos

selectores rápidos

Apuntalar	Tipo	Descripción
label	cadena	Etiqueta para el botón
startMonth	Fecha	Fecha para el mes de inicio de rango
endMonth	Fecha	Fecha para el rango final del mes
variant	Buttonvariant	variante para el botón
onClick	(Selector: QuickSelector) => Void	Llamado cuando se ha hecho clic en la selección rápida

devoluciones de llamada

Apuntalar	Tipo	Descripción
yearLabel	(año: número) => cadena	Utilizado para diseñar la etiqueta del año
monthLabel	(Mes: mes)	Se utiliza para diseñar las etiquetas del mes

 type Month = { number : number ; name : string ; yearOffset : number } ; // yearOffset = 0 on the left calendar and 1 on the right side calendar

variante

Apuntalar	Tipo	Descripción
calendar	{ main: ButtonVariant, selected: ButtonVariant }	Estilo para los mes-buttons. main para el botón no seleccionado y selected para el botón seleccionado
chevrons	Buttonvariant	Estilización para los botones hacia atrás

 type ButtonVariant = "default" | "outline" | "ghost" | "link" | "destructive" | "secondary" | null | undefined ; 

Ejemplo con componente form shadcn

Puede usar MonthPicker y MonthRangePicker con formularios ShadCn. Un esquema de forma podría verse así:

 const FormSchema = z . object ( {
    month : z . date ( ) ,
    monthrange : z . object ( {
        start : z . date ( ) ,
        end : z . date ( ) ,
    } ) ,
} ) ;

Puede ver un ejemplo de formulario completo aquí