shadcn ui monthpicker

MonthPicker & MonthRangePicker для Shadcn-UI

Полностью настраиваемый Monthpicker и компонент Monthrangepicker созданный для Shadcn-UI. (Radix, Tailwind CSS).

Попробуйте демо!

Установка

Компоненты требуют следующих компонентов Shadcn-UI.

• Кнопка
• Попвер (необязательно)

Установка 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	(дата: дата) => void	-	Вызывает, когда был выбран месяц
selectedMonth	Дата	Сегодняшний месяц	Месячное состояние для инициализации
minDate	Дата	Нет ограничения	Минимальная выбираемая дата
maxDate	Дата	Нет ограничения	Максимальная выбираемая дата
disabledDates	Дата[]	-	Отдельные не выбираемые месяцы
callbacks	объект	-	Смотрите таблицу обратных вызовов
variant	объект	-	Смотрите таблицу вариантов
onYearForward	() => void	-	Вызвано, когда календарь просмотрел вперед
onYearBackward	() => void	-	Вызвано, когда календарь просмотрел назад

обратные вызовы

| PROP | Тип | Описание | | ------------ | ------------------------ | --------------------------------- | | `Годовой (Год: номер) => строка | Используется для укладки лейбла года | | `Monthlabel` | (месяц: месяц) | Используется для стиля месяца ярлыков |

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

вариант

Проп	Тип	Описание
calendar	{ main: ButtonVariant, selected: ButtonVariant }	Стиль для месяца-понесения. main для не выбранного и selected для выбранной кнопки
chevrons	Buttonvariant	Стиль для кнопок назад и вперед-chevron

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

Monthrangepicker Component

Пример

 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	(дата: дата) => void	-	Выбран, когда был выбран диапазон месяца
onStartMonthSelect	(дата: дата) => void	-	Вызов, когда был выбран месяц начала диапазона, и конец диапазона все еще находится на рассмотрении
selectedMonthRange	Дата	Сегодняшний месяц	Месячное состояние для инициализации
minDate	Дата	Нет ограничения	Минимальная выбираемая дата
maxDate	Дата	Нет ограничения	Максимальная выбираемая дата
callbacks	объект	-	Смотрите таблицу обратных вызовов
variant	объект	-	Смотрите таблицу вариантов
onYearForward	() => void	-	Вызвано, когда календарь просмотрел вперед
onYearBackward	() => void	-	Вызвано, когда календарь просмотрел назад
quickSelectors	Объект[]	-	Смотрите таблицу QuickSelectors
showQuickSelectors	логический	истинный	Показать/скрыть быстрые селекты

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	Стиль для кнопок назад и вперед-chevron

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

Вы можете проверить полный пример формы здесь