shadcn ui monthpicker

MoisPicker et MontrangePicker pour shadcn-ui

Un composant Monthpicker et Monthrangepicker entièrement personnalisable conçu pour Shadcn-UI. (Radix, CSS de vent arrière).

Essayez la démo!

Installation

Les composants nécessitent les composants Shadcn-UI suivants.

• Bouton
• Popover (facultatif)

Installation de la CLI:

 npx shadcn-ui@latest add button popover

Lien vers les composants:

• Picker d'un mois
• MontrangePicker

Lucide React est également nécessaire pour les icônes.

Monthpicker

Exemple

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

Utiliser avec Shadcn-UI Popover Component:

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

Accessoires

Soutenir	Taper	Défaut	Description
onMonthSelect	(Date: Date) => void	-	Appelé lorsqu'un mois a été sélectionné
selectedMonth	Date	Le mois d'aujourd'hui	État du mois pour l'initialisation
minDate	Date	pas de limite	La date de sélection minimale
maxDate	Date	pas de limite	La date de sélection maximale
disabledDates	Date[]	-	Mois séparés non sélectionnables
callbacks	objet	-	Voir le tableau des rappels
variant	objet	-	Voir la table variante
onYearForward	() => void	-	Appelé lorsque le calendrier navigué vers l'avant
onYearBackward	() => void	-	Appelé lorsque le calendrier navigué vers l'arrière

rappels

| Accessoire | Type | Description | | ------------ | ------------------------ | --------------------------------- | | `YearLabel` | (Année: numéro) => String | Utilisé pour styliser l'étiquette de l'année | | `MonthLabel` | (mois: mois) | Utilisé pour styliser les étiquettes du mois |

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

variante

Soutenir	Taper	Description
calendar	{ main: ButtonVariant, selected: ButtonVariant }	Style pour les boutons de mois. main pour le bouton non sélectionné et selected pour le bouton sélectionné
chevrons	Boutonner	Styling pour les boutons arrière et avant-chevron

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

Composant Monthrangepicker

Exemple

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

Utiliser avec Shadcn-UI Popover Component:

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

Accessoires

Soutenir	Taper	Défaut	Description
onMonthRangeSelect	(Date: Date) => void	-	Appelé lorsqu'une portée de mois a été sélectionnée
onStartMonthSelect	(Date: Date) => void	-	Appelé lorsque le mois de démarrage de la plage a été sélectionné et que la fin de portée est toujours en attente
selectedMonthRange	Date	Le mois d'aujourd'hui	État du mois pour l'initialisation
minDate	Date	pas de limite	La date de sélection minimale
maxDate	Date	pas de limite	La date de sélection maximale
callbacks	objet	-	Voir le tableau des rappels
variant	objet	-	Voir la table variante
onYearForward	() => void	-	Appelé lorsque le calendrier navigué vers l'avant
onYearBackward	() => void	-	Appelé lorsque le calendrier navigué vers l'arrière
quickSelectors	Objet[]	-	Voir la table QuickSelectors
showQuickSelectors	booléen	vrai	Afficher / masquer les QuickSelectors

QuickSelectors

Soutenir	Taper	Description
label	chaîne	Étiqueter le bouton
startMonth	Date	Date du mois de début de la gamme
endMonth	Date	Date pour le mois de fin de portée
variant	Boutonner	variante pour le bouton
onClick	(sélecteur: QuickSelector) => void	Appelé lorsque la sélection rapide a été cliquée

rappels

Soutenir	Taper	Description
yearLabel	(Année: numéro) => String	Utilisé pour styliser l'étiquette de l'année
monthLabel	(mois: mois)	Utilisé pour styliser les étiquettes du mois

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

variante

Soutenir	Taper	Description
calendar	{ main: ButtonVariant, selected: ButtonVariant }	Style pour les boutons de mois. main pour le bouton non sélectionné et selected pour le bouton sélectionné
chevrons	Boutonner	Styling pour les boutons arrière et avant-chevron

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

Exemple avec le composant form Shadcn

Vous pouvez utiliser MoisPicker et MontrayPicker avec des formulaires Shadcn. Un schéma de forme pourrait ressembler à ceci:

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

Vous pouvez consulter un exemple de formulaire complet ici