หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ส่วนประกอบของบุคคลที่สาม
ดาวน์โหลด

MonthPicker & MonthRangePicker สำหรับ Shadcn-ui

ส่วนประกอบ Monthpicker และ Monthrangepicker ที่ปรับแต่งได้อย่างเต็มที่สร้างขึ้นสำหรับ Shadcn-Ui (Radix, Tailwind CSS)

ลองสาธิต!

การติดตั้ง

ส่วนประกอบต้องการส่วนประกอบ Shadcn-Ui ต่อไปนี้

  • ปุ่ม
  • Popover (ไม่บังคับ)

การติดตั้ง CLI: 

 npx shadcn-ui@latest add button popover

ลิงก์ไปยังส่วนประกอบ:

  • ผู้พิพากษาเดือน
  • 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 } / > ;
}

ใช้กับส่วนประกอบ 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 >
    ) ;
}

อุปกรณ์ประกอบฉาก

ข้อต่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย
onMonthSelect (วันที่: วันที่) => โมฆะ - เรียกว่าเมื่อหนึ่งเดือนได้รับการคัดเลือก
selectedMonth วันที่ เดือนของวันนี้ สถานะเดือนสำหรับการเริ่มต้น
minDate วันที่ ไม่ จำกัด วันที่เลือกขั้นต่ำได้
maxDate วันที่ ไม่ จำกัด วันที่ที่เลือกได้สูงสุด
disabledDates วันที่[] - แยกเดือนที่ไม่สามารถเลือกได้
callbacks วัตถุ - ดูตารางการโทรกลับ
variant วัตถุ - ดูตารางตัวแปร
onYearForward () => โมฆะ - เรียกว่าเมื่อปฏิทินเรียกดูไปข้างหน้า
onYearBackward () => โมฆะ - เรียกว่าเมื่อปฏิทินเรียกดูย้อนหลัง
การโทรกลับ - เสา | ประเภท | คำอธิบาย | - - - - - `Yearlabel` | (ปี: หมายเลข) => สตริง | ใช้สำหรับการจัดแต่งทรงผมประจำปี - `monthlabel` | (เดือน: เดือน) | ใช้สำหรับการจัดแต่งทรงผมเดือน 
 type Month = { number : number ; name : string } ;
แตกต่างกันไป
ข้อต่อ พิมพ์ คำอธิบาย
calendar { main: ButtonVariant, selected: ButtonVariant } จัดแต่งทรงผมสำหรับเดือนบัตตัน main สำหรับปุ่มที่ไม่ได้เลือกและ selected สำหรับปุ่มที่เลือก
chevrons ButtonVariant จัดแต่งทรงผมสำหรับปุ่มย้อนหลัง & ไปข้างหน้า 
 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 } / > ;
}

ใช้กับส่วนประกอบ 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 >
    ) ;
}

อุปกรณ์ประกอบฉาก

ข้อต่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย
onMonthRangeSelect (วันที่: วันที่) => โมฆะ - เรียกว่าช่วงเวลาหนึ่งเดือนได้รับการคัดเลือก
onStartMonthSelect (วันที่: วันที่) => โมฆะ - เรียกว่าเมื่อมีการเลือกเดือนเริ่มต้นและช่วงสิ้นสุดช่วงยังคงรอดำเนินการ
selectedMonthRange วันที่ เดือนของวันนี้ สถานะเดือนสำหรับการเริ่มต้น
minDate วันที่ ไม่ จำกัด วันที่เลือกขั้นต่ำได้
maxDate วันที่ ไม่ จำกัด วันที่ที่เลือกได้สูงสุด
callbacks วัตถุ - ดูตารางการโทรกลับ
variant วัตถุ - ดูตารางตัวแปร
onYearForward () => โมฆะ - เรียกว่าเมื่อปฏิทินเรียกดูไปข้างหน้า
onYearBackward () => โมฆะ - เรียกว่าเมื่อปฏิทินเรียกดูย้อนหลัง
quickSelectors วัตถุ[] - ดูตาราง QuickSelectors
showQuickSelectors บูลีน จริง แสดง/ซ่อน quickselectors
QuickSelectors
ข้อต่อ พิมพ์ คำอธิบาย
label สาย ฉลากสำหรับปุ่ม
startMonth วันที่ วันที่สำหรับช่วงเริ่มต้นเดือน
endMonth วันที่ วันที่สำหรับเดือนสิ้นสุด
variant ButtonVariant ตัวแปรสำหรับปุ่ม
onClick (ตัวเลือก: QuickSelector) => โมฆะ เรียกว่าเมื่อคลิกอย่างรวดเร็ว
การโทรกลับ
ข้อต่อ พิมพ์ คำอธิบาย
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 } จัดแต่งทรงผมสำหรับเดือนบัตตัน main สำหรับปุ่มที่ไม่ได้เลือกและ selected สำหรับปุ่มที่เลือก
chevrons ButtonVariant จัดแต่งทรงผมสำหรับปุ่มย้อนหลัง & ไปข้างหน้า 
 type ButtonVariant = "default" | "outline" | "ghost" | "link" | "destructive" | "secondary" | null | undefined ;

ตัวอย่างด้วยองค์ประกอบ form Shadcn

คุณสามารถใช้ MonthPicker และ MonthRangePicker ด้วยแบบฟอร์ม Shadcn สคีมาแบบฟอร์มอาจมีลักษณะเช่นนี้: 

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

คุณสามารถตรวจสอบตัวอย่างแบบเต็มรูปแบบได้ที่นี่

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด