shadcn ui monthpicker

MonthPicker & MonthRangePicker untuk shadcn-ui

Komponen Monthpicker dan Komponen Monthrangepicker yang sepenuhnya dapat disesuaikan dibangun untuk Shadcn-UI. (Radix, Tailwind CSS).

Coba demo!

Instalasi

Komponen membutuhkan komponen shadcn-ui berikut.

• Tombol
• Popover (opsional)

Instalasi CLI:

 npx shadcn-ui@latest add button popover

Tautan ke komponen:

• Monthpicker
• MonthRangePicker

Lucide React juga diunggulkan untuk ikon.

Komponen Monthpicker

Contoh

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

Gunakan dengan komponen Popover shadcn-ui:

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

Alat peraga

Menopang	Jenis	Bawaan	Keterangan
onMonthSelect	(tanggal: tanggal) => batal	-	Dipanggil saat sebulan telah dipilih
selectedMonth	Tanggal	Bulan hari ini	Keadaan bulan untuk inisialisasi
minDate	Tanggal	tidak ada batasan	Tanggal yang dapat dipilih minimum
maxDate	Tanggal	tidak ada batasan	Tanggal yang dapat dipilih maksimum
disabledDates	Tanggal[]	-	Terpisah bulan yang tidak dapat dipilih
callbacks	obyek	-	Lihat Tabel Callbacks
variant	obyek	-	Lihat tabel varian
onYearForward	() => batal	-	Dipanggil saat kalender menjelajah ke depan
onYearBackward	() => batal	-	Dipanggil saat kalender menelusuri ke belakang

panggilan balik

| Prop | Ketik | Deskripsi | | ------------ | ------------------------ | --------------------------------- | | `YearLabel` | (tahun: angka) => string | Digunakan untuk menata label tahun | | `Bulan Label` | (Bulan: Bulan) | Digunakan untuk menata label bulan |

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

variasi

Menopang	Jenis	Keterangan
calendar	{ main: ButtonVariant, selected: ButtonVariant }	Styling untuk tombol bulan. main untuk tombol yang tidak dipilih & selected untuk dipilih
chevrons	Buttonvariant	Penataan untuk Tombol Backward- & Forward-Chevron

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

Komponen Monthrangepicker

Contoh

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

Gunakan dengan komponen Popover shadcn-ui:

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

Alat peraga

Menopang	Jenis	Bawaan	Keterangan
onMonthRangeSelect	(tanggal: tanggal) => batal	-	Dipanggil saat kisaran satu bulan telah dipilih
onStartMonthSelect	(tanggal: tanggal) => batal	-	Dipanggil saat rentang Bulan mulai telah dipilih dan ujung jangkauan masih tertunda
selectedMonthRange	Tanggal	Bulan hari ini	Keadaan bulan untuk inisialisasi
minDate	Tanggal	tidak ada batasan	Tanggal yang dapat dipilih minimum
maxDate	Tanggal	tidak ada batasan	Tanggal yang dapat dipilih maksimum
callbacks	obyek	-	Lihat Tabel Callbacks
variant	obyek	-	Lihat tabel varian
onYearForward	() => batal	-	Dipanggil saat kalender menjelajah ke depan
onYearBackward	() => batal	-	Dipanggil saat kalender menelusuri ke belakang
quickSelectors	Obyek[]	-	Lihat tabel QuickSelectors
showQuickSelectors	Boolean	BENAR	Tunjukkan/sembunyikan quickselectors

Cepat Selektor

Menopang	Jenis	Keterangan
label	rangkaian	Label untuk tombol
startMonth	Tanggal	Tanggal untuk Bulan Mulai Kisaran
endMonth	Tanggal	Tanggal untuk Bulan Akhir Kisaran
variant	Buttonvariant	varian untuk tombol
onClick	(pemilih: QuickSelector) => void	Dipanggil saat pemilihan cepat telah diklik

panggilan balik

Menopang	Jenis	Keterangan
yearLabel	(tahun: angka) => string	Digunakan untuk menata label tahun
monthLabel	(Bulan: Bulan)	Digunakan untuk menata label bulan

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

variasi

Menopang	Jenis	Keterangan
calendar	{ main: ButtonVariant, selected: ButtonVariant }	Styling untuk tombol bulan. main untuk tombol yang tidak dipilih & selected untuk dipilih
chevrons	Buttonvariant	Penataan untuk Tombol Backward- & Forward-Chevron

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

Contoh dengan komponen form shadcn

Anda dapat menggunakan bulan dan monthrangePicker dengan formulir shadcn. Skema formulir bisa terlihat seperti ini:

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

Anda dapat memeriksa contoh formulir lengkap di sini