shadcn ui monthpicker

Monatpicker & monatRangepicker für Shadcn-ui

Eine vollständig anpassbare Monthpicker und Monthrangepicker Komponente, die für Shadcn-UI erstellt wurde. (Radix, Rückenwind -CSS).

Probieren Sie die Demo aus!

Installation

Die Komponenten erfordern die folgenden Shadcn-UI-Komponenten.

• Taste
• Popover (optional)

CLI -Installation:

 npx shadcn-ui@latest add button popover

Link zu Komponenten:

• Monatpicker
• MonatRangepicker

Auch Lucide React ist für die Ikonen erforderlich.

Monthpicker -Komponente

Beispiel

 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 } / > ;
}

Verwendung mit Shadcn-UI Popover Komponente:

 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 >
    ) ;
}

Requisiten

Stütze	Typ	Standard	Beschreibung
onMonthSelect	(Datum: Datum) => void	- -	Aufgerufen, wenn ein Monat ausgewählt wurde
selectedMonth	Datum	Der heutige Monat	Monatszustand für die Initialisierung
minDate	Datum	Keine Grenze	Das minimale selektierbare Datum
maxDate	Datum	Keine Grenze	Das maximale selektierbare Datum
disabledDates	Datum[]	- -	Getrennte nicht wählbare Monate
callbacks	Objekt	- -	Siehe Callbacks -Tabelle
variant	Objekt	- -	Siehe Variante Tabelle
onYearForward	() => void	- -	Aufgerufen, als der Kalender nach vorne stöberte
onYearBackward	() => void	- -	Aufgerufen, als der Kalender rückwärts stöberte

Rückrufe

| Requisite | Typ | Beschreibung | | ------------ | ------------------------ | ---------------------------------- | | `Yearlabel` | (Jahr: Nummer) => String | Wird zum Styling des Jahreslabels | verwendet | | `MonthLabel` | (Monat: Monat) | Wird zum Styling der Monatsetiketten verwendet |

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

Variante

Stütze	Typ	Beschreibung
calendar	{ main: ButtonVariant, selected: ButtonVariant }	Styling für die Monatsbuttons. main für nicht ausgewählte und ausgewählte Taste selected
chevrons	Buttonvariante	Styling für die Buttons nach hinten und vorwärts-Chevron

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

Monthrangepicker -Komponente

Beispiel

 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 } / > ;
}

Verwendung mit Shadcn-UI Popover Komponente:

 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 >
    ) ;
}

Requisiten

Stütze	Typ	Standard	Beschreibung
onMonthRangeSelect	(Datum: Datum) => void	- -	Aufgerufen, wenn ein Monat ausgewählt wurde
onStartMonthSelect	(Datum: Datum) => void	- -	Aufgerufen, wenn der Reichwartmonat ausgewählt wurde und das Range -Ende noch anhängig ist
selectedMonthRange	Datum	Der heutige Monat	Monatszustand für die Initialisierung
minDate	Datum	Keine Grenze	Das minimale selektierbare Datum
maxDate	Datum	Keine Grenze	Das maximale selektierbare Datum
callbacks	Objekt	- -	Siehe Callbacks -Tabelle
variant	Objekt	- -	Siehe Variante Tabelle
onYearForward	() => void	- -	Aufgerufen, als der Kalender nach vorne stöberte
onYearBackward	() => void	- -	Aufgerufen, als der Kalender rückwärts stöberte
quickSelectors	Objekt[]	- -	Siehe Tisch QuickSelectors
showQuickSelectors	boolean	WAHR	Zeigen/verstecken Sie die Quickselektoren

Schnellinselektoren

Stütze	Typ	Beschreibung
label	Saite	Beschriftung für die Taste
startMonth	Datum	Datum für den Startmonat des Reichweite
endMonth	Datum	Datum für den Range -Ende Monat
variant	Buttonvariante	Variante für die Taste
onClick	(Selektor: QuickSelector) => void	Aufgerufen, wenn eine schnelle Auswahl geklickt wurde

Rückrufe

Stütze	Typ	Beschreibung
yearLabel	(Jahr: Nummer) => String	Wird zum Styling des Jahresetiketts verwendet
monthLabel	(Monat: Monat)	Wird zum Styling der Monatsetiketten verwendet

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

Variante

Stütze	Typ	Beschreibung
calendar	{ main: ButtonVariant, selected: ButtonVariant }	Styling für die Monatsbuttons. main für nicht ausgewählte und ausgewählte Taste selected
chevrons	Buttonvariante	Styling für die Buttons nach hinten und vorwärts-Chevron

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

Beispiel mit Shadcn form

Sie können MonthPicker und MonthRangepicker mit Shadcn -Formularen verwenden. Ein Formschema könnte so aussehen:

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

Sie können sich hier ein Beispiel für ein volles Formular ansehen