الصفحة الرئيسية>المتعلقة بالبرمجة>مكونات الطرف الثالث
تنزيل

MonthPicker & MonthRangePicker لـ Shadcn-Ui

تم تصميم مكون Monthpicker القابل للتخصيص بالكامل ومكون Monthrangepicker لـ Shadcn-Ui. (Radix ، Tailwind CSS).

جرب العرض التوضيحي!

تثبيت

تتطلب المكونات مكونات Shadcn-UI التالية.

  • زر
  • Popover (اختياري)

تثبيت CLI: 

 npx shadcn-ui@latest add button popover

رابط للمكونات:

  • Monthpicker
  • montrangepicker

كما يتم طلب رد فعل Lucide للأيقونات.

مكون 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 () => باطلة - دعا عندما تصفح التقويم إلى الأمام
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 } / > ;
}

استخدم مع مكون 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 () => باطلة - دعا عندما تصفح التقويم إلى الأمام
onYearBackward () => باطلة - استدعاء عندما تصفح التقويم للخلف
quickSelectors هدف[] - انظر الجدول QuickSelectors
showQuickSelectors منطقية حقيقي إظهار/إخفاء QuickSelectors
QuickSelectors
دعم يكتب وصف
label خيط تسمية للزر
startMonth تاريخ تاريخ شهر بدء النطاق
endMonth تاريخ تاريخ شهر نهاية المدى
variant ButtonVariant البديل للزر
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 } تصميم للشهر البوتون. 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 ( ) ,
    } ) ,
} ) ;

يمكنك التحقق من مثال كامل هنا

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل