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