shadcn ui monthpicker下載shadcn ui monthpicker源代碼下載

shadcn ui monthpicker

三方組件

1.0.0

下載

shadcn-ui的月份＆montrangepicker

為ShadCN-UI構建的一個完全可定制的Monthpicker和Monthrangepicker組件。（radix，尾風CSS）。

嘗試演示！

安裝

這些組件需要以下shadcn-UI組件。

按鈕
彈出式（可選）

CLI安裝：

 npx shadcn-ui@latest add button popover

鏈接到組件：

月份
montrangepicker

同樣為圖標要求Lucide React要求。

`Monthpicker`組件

例子

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

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

道具

支柱	類型	預設	描述
`onMonthSelect`	（日期：日期）=> void	-	何時選擇一個月
`selectedMonth`	日期	今天的月份	初始化月份
`minDate`	日期	無限制	最低可選日期
`maxDate`	日期	無限制	最大可選日期
`disabledDates`	日期[]	-	單獨的非選擇月份
`callbacks`	目的	-	請參閱回調表
`variant`	目的	-	請參閱變體表
`onYearForward`	（）=> void	-	日曆向前瀏覽時調用
`onYearBackward`	（）=> void	-	日曆向後瀏覽時調用

回調

|道具|類型|描述| | -------------- | ------------------------------ | ----------------------------------------- | | `年llabel` | （年：數字）=>字符串|用於造型年度標籤| | `monthabel` | （月：月）|用於造型本月標籤|

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

變體

支柱	類型	描述
`calendar`	{ `main: ButtonVariant, selected: ButtonVariant` }	一個月按鈕的造型。主要選擇並`selected`選定按鈕的`main`
`chevrons`	鈕扣	向後和前進式的按鈕的造型

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

`Monthrangepicker`組件

例子

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

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

道具

支柱	類型	預設	描述
`onMonthRangeSelect`	（日期：日期）=> void	-	何時選擇一個月範圍
`onStartMonthSelect`	（日期：日期）=> void	-	當選擇範圍開始月且範圍末端仍在等待時打電話
`selectedMonthRange`	日期	今天的月份	初始化月份
`minDate`	日期	無限制	最低可選日期
`maxDate`	日期	無限制	最大可選日期
`callbacks`	目的	-	請參閱回調表
`variant`	目的	-	請參閱變體表
`onYearForward`	（）=> void	-	日曆向前瀏覽時調用
`onYearBackward`	（）=> void	-	日曆向後瀏覽時調用
`quickSelectors`	目的[]	-	請參閱QuickSelectors表
`showQuickSelectors`	布爾	真的	顯示/隱藏QuickSelectors

QuickSelectors

支柱	類型	描述
`label`	細繩	按鈕標籤
`startMonth`	日期	範圍開始月的日期
`endMonth`	日期	範圍結束月的日期
`variant`	鈕扣	按鈕的變體
`onClick`	（選擇器：QuickSelector）=> void	單擊快速選擇時調用

回調

支柱	類型	描述
`yearLabel`	（年：編號）=>字符串	用於造型一年的標籤
`monthLabel`	（月：月）	用於造型本月標籤

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

變體

支柱	類型	描述
`calendar`	{ `main: ButtonVariant, selected: ButtonVariant` }	一個月按鈕的造型。主要選擇並`selected`選定按鈕的`main`
`chevrons`	鈕扣	向後和前進式的按鈕的造型

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

帶有shadcn `form`組件的示例

您可以使用ShadCN表格的月份和月份鍵盤。形式模式看起來像這樣：

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