shadcn ui monthpicker

Shadcn-UI의 MonthPicker & MonthRangePicker

Shadcn-UI 용으로 구축 된 완전히 사용자 정의 가능한 Monthpicker 및 Monthrangepicker 구성 요소. (Radix, Tailwind CSS).

데모를 시험해보십시오!

설치

구성 요소에는 다음 Shadcn-UI 구성 요소가 필요합니다.

• 단추
• 팝 오버 (선택 사항)

CLI 설치 :

 npx shadcn-ui@latest add button popover

구성 요소에 대한 링크 :

• Monthpicker
• MonthRangePicker

또한 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	(날짜 : 날짜) => 무효	-	한 달이 선정되었을 때 호출됩니다
selectedMonth	날짜	오늘의 달	초기화를위한 월 상태
minDate	날짜	제한이 없습니다	최소 선택 가능한 날짜
maxDate	날짜	제한이 없습니다	최대 선택 가능한 날짜
disabledDates	날짜[]	-	선택 불가능한 달을 별도로 사용하십시오
callbacks	물체	-	콜백 테이블을 참조하십시오
variant	물체	-	변형 테이블을 참조하십시오
onYearForward	() => void	-	캘린더가 앞으로 탐색했을 때 호출됩니다
onYearBackward	() => void	-	달력이 뒤로 탐색 될 때 호출됩니다

콜백

| 소품 | 유형 | 설명 | | ------------ | ---------------------- | -------------------------------- | | `Yearlabel` (연도 : 번호) => 문자열 | 연도 라벨 스타일링에 사용됩니다 | | `Monthlabel` (월 : 월) | 달 레이블 스타일링에 사용 |

 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	(날짜 : 날짜) => 무효	-	한 달 범위가 선택되었을 때 호출됩니다
onStartMonthSelect	(날짜 : 날짜) => 무효	-	범위 시작 달이 선택되었을 때 호출되고 범위 끝은 여전히 보류 중입니다.
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 양식과 함께 MonthPicker 및 MonthRangePicker를 사용할 수 있습니다. 양식 스키마는 다음과 같습니다.

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

여기에서 전체 양식 예제를 확인할 수 있습니다