Vite + React + TS

82 | 83 | ) 84 | }) 85 | FormItem.displayName = "FormItem" 86 | 87 | const FormLabel = React.forwardRef< 88 | React.ElementRef, 89 | React.ComponentPropsWithoutRef 90 | >(({ className, ...props }, ref) => { 91 | const { error, formItemId } = useFormField() 92 | 93 | return ( 94 | 100 | ) 101 | }) 102 | FormLabel.displayName = "FormLabel" 103 | 104 | const FormControl = React.forwardRef< 105 | React.ElementRef, 106 | React.ComponentPropsWithoutRef 107 | >(({ ...props }, ref) => { 108 | const { error, formItemId, formDescriptionId, formMessageId } = useFormField() 109 | 110 | return ( 111 | 122 | ) 123 | }) 124 | FormControl.displayName = "FormControl" 125 | 126 | const FormDescription = React.forwardRef< 127 | HTMLParagraphElement, 128 | React.HTMLAttributes 129 | >(({ className, ...props }, ref) => { 130 | const { formDescriptionId } = useFormField() 131 | 132 | return ( 133 |

139 | ) 140 | }) 141 | FormDescription.displayName = "FormDescription" 142 | 143 | const FormMessage = React.forwardRef< 144 | HTMLParagraphElement, 145 | React.HTMLAttributes 146 | >(({ className, children, ...props }, ref) => { 147 | const { error, formMessageId } = useFormField() 148 | const body = error ? String(error?.message) : children 149 | 150 | if (!body) { 151 | return null 152 | } 153 | 154 | return ( 155 |

161 | {body} 162 |

163 | ) 164 | }) 165 | FormMessage.displayName = "FormMessage" 166 | 167 | export { 168 | useFormField, 169 | Form, 170 | FormItem, 171 | FormLabel, 172 | FormControl, 173 | FormDescription, 174 | FormMessage, 175 | FormField, 176 | } 177 | -------------------------------------------------------------------------------- /src/FormExample.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { zodResolver } from "@hookform/resolvers/zod"; 4 | import { useForm } from "react-hook-form"; 5 | import { z } from "zod"; 6 | 7 | import { Button } from "@/components/ui/button"; 8 | import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"; 9 | import { Popover, PopoverContent, PopoverTrigger } from "./components/ui/popover"; 10 | import { CalendarIcon } from "lucide-react"; 11 | import { format } from "date-fns/format"; 12 | import { cn } from "@/lib/utils"; 13 | import { MonthPicker } from "@/components/ui/monthpicker"; 14 | import { MonthRangePicker } from "@/components/ui/monthrangepicker"; 15 | 16 | const FormSchema = z.object({ 17 | month: z.date(), 18 | monthrange: z.object({ 19 | start: z.date(), 20 | end: z.date(), 21 | }), 22 | }); 23 | 24 | export function FormExample() { 25 | const form = useForm>({ 26 | resolver: zodResolver(FormSchema), 27 | }); 28 | 29 | function onSubmit(data: z.infer) { 30 | // process data here 31 | console.log(data.month); 32 | console.log(data.monthrange.start, data.monthrange.end); 33 | } 34 | 35 | return ( 36 |

37 | 38 |

39 | ( 43 | 44 | Month 45 | 46 | 47 | 48 | 52 | 53 | 54 | 55 | form.setValue("month", newDate)} selectedMonth={field.value}> 56 | 57 | 58 | This is a form description 59 | 60 | 61 | )} 62 | /> 63 | ( 67 | 68 | Monthrange 69 | 70 | 71 | 72 | 80 | 81 | 82 | 83 | form.setValue("monthrange", newDates)} selectedMonthRange={field.value}> 84 | 85 | 86 | This is a form description 87 | 88 | 89 | )} 90 | /> 91 |

92 | 93 | 94 |

95 | 96 | ); 97 | } 98 | -------------------------------------------------------------------------------- /public/r/monthpicker.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "name": "monthpicker", 4 | "type": "registry:ui", 5 | "title": "Month Picker", 6 | "author": "@greenkdev", 7 | "description": "A month picker component.", 8 | "dependencies": [ 9 | "lucide-react" 10 | ], 11 | "registryDependencies": [ 12 | "button" 13 | ], 14 | "files": [ 15 | { 16 | "path": "src/components/ui/monthpicker.tsx", 17 | "content": "\"use client\";\nimport * as React from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { buttonVariants } from \"./button\";\nimport { cn } from \"@/lib/utils\";\n\ntype Month = {\n number: number;\n name: string;\n};\n\nconst MONTHS: Month[][] = [\n [\n { number: 0, name: \"Jan\" },\n { number: 1, name: \"Feb\" },\n { number: 2, name: \"Mar\" },\n { number: 3, name: \"Apr\" },\n ],\n [\n { number: 4, name: \"May\" },\n { number: 5, name: \"Jun\" },\n { number: 6, name: \"Jul\" },\n { number: 7, name: \"Aug\" },\n ],\n [\n { number: 8, name: \"Sep\" },\n { number: 9, name: \"Oct\" },\n { number: 10, name: \"Nov\" },\n { number: 11, name: \"Dec\" },\n ],\n];\n\ntype MonthCalProps = {\n selectedMonth?: Date;\n onMonthSelect?: (date: Date) => void;\n onYearForward?: () => void;\n onYearBackward?: () => void;\n callbacks?: {\n yearLabel?: (year: number) => string;\n monthLabel?: (month: Month) => string;\n };\n variant?: {\n calendar?: {\n main?: ButtonVariant;\n selected?: ButtonVariant;\n };\n chevrons?: ButtonVariant;\n };\n minDate?: Date;\n maxDate?: Date;\n disabledDates?: Date[];\n};\n\ntype ButtonVariant = \"default\" | \"outline\" | \"ghost\" | \"link\" | \"destructive\" | \"secondary\" | null | undefined;\n\nfunction MonthPicker({\n onMonthSelect,\n selectedMonth,\n minDate,\n maxDate,\n disabledDates,\n callbacks,\n onYearBackward,\n onYearForward,\n variant,\n className,\n ...props\n}: React.HTMLAttributes & MonthCalProps) {\n return (\n

\n \n

\n );\n}\n\nfunction MonthCal({ selectedMonth, onMonthSelect, callbacks, variant, minDate, maxDate, disabledDates, onYearBackward, onYearForward }: MonthCalProps) {\n const [year, setYear] = React.useState(selectedMonth?.getFullYear() ?? new Date().getFullYear());\n const [month, setMonth] = React.useState(selectedMonth?.getMonth() ?? new Date().getMonth());\n const [menuYear, setMenuYear] = React.useState(year);\n\n if (minDate && maxDate && minDate > maxDate) minDate = maxDate;\n\n const disabledDatesMapped = disabledDates?.map((d) => {\n return { year: d.getFullYear(), month: d.getMonth() };\n });\n\n return (\n <>\n

{callbacks?.yearLabel ? callbacks?.yearLabel(menuYear) : menuYear}

\n {\n setMenuYear(menuYear - 1);\n if (onYearBackward) onYearBackward();\n }}\n className={cn(buttonVariants({ variant: variant?.chevrons ?? \"outline\" }), \"inline-flex items-center justify-center h-7 w-7 p-0 absolute left-1\")}\n >\n \n \n {\n setMenuYear(menuYear + 1);\n if (onYearForward) onYearForward();\n }}\n className={cn(buttonVariants({ variant: variant?.chevrons ?? \"outline\" }), \"inline-flex items-center justify-center h-7 w-7 p-0 absolute right-1\")}\n >\n \n \n

\n \n \n {MONTHS.map((monthRow, a) => {\n return (\n \n {monthRow.map((m) => {\n return (\n \n {\n setMonth(m.number);\n setYear(menuYear);\n if (onMonthSelect) onMonthSelect(new Date(menuYear, m.number));\n }}\n disabled={\n (maxDate ? menuYear > maxDate?.getFullYear() || (menuYear == maxDate?.getFullYear() && m.number > maxDate.getMonth()) : false) ||\n (minDate ? menuYear < minDate?.getFullYear() || (menuYear == minDate?.getFullYear() && m.number < minDate.getMonth()) : false) ||\n (disabledDatesMapped ? disabledDatesMapped?.some((d) => d.year == menuYear && d.month == m.number) : false)\n }\n className={cn(\n buttonVariants({ variant: month == m.number && menuYear == year ? variant?.calendar?.selected ?? \"default\" : variant?.calendar?.main ?? \"ghost\" }),\n \"h-full w-full p-0 font-normal aria-selected:opacity-100\"\n )}\n >\n {callbacks?.monthLabel ? callbacks.monthLabel(m) : m.name}\n \n \n );\n })}\n \n );\n })}\n \n

\n \n );\n}\n\nMonthPicker.displayName = \"MonthPicker\";\n\nexport { MonthPicker };\n", 18 | "type": "registry:ui" 19 | } 20 | ] 21 | } -------------------------------------------------------------------------------- /src/components/ui/monthpicker.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import * as React from "react"; 3 | import { ChevronLeft, ChevronRight } from "lucide-react"; 4 | import { buttonVariants } from "./button"; 5 | import { cn } from "@/lib/utils"; 6 | 7 | type Month = { 8 | number: number; 9 | name: string; 10 | }; 11 | 12 | const MONTHS: Month[][] = [ 13 | [ 14 | { number: 0, name: "Jan" }, 15 | { number: 1, name: "Feb" }, 16 | { number: 2, name: "Mar" }, 17 | { number: 3, name: "Apr" }, 18 | ], 19 | [ 20 | { number: 4, name: "May" }, 21 | { number: 5, name: "Jun" }, 22 | { number: 6, name: "Jul" }, 23 | { number: 7, name: "Aug" }, 24 | ], 25 | [ 26 | { number: 8, name: "Sep" }, 27 | { number: 9, name: "Oct" }, 28 | { number: 10, name: "Nov" }, 29 | { number: 11, name: "Dec" }, 30 | ], 31 | ]; 32 | 33 | type MonthCalProps = { 34 | selectedMonth?: Date; 35 | onMonthSelect?: (date: Date) => void; 36 | onYearForward?: () => void; 37 | onYearBackward?: () => void; 38 | callbacks?: { 39 | yearLabel?: (year: number) => string; 40 | monthLabel?: (month: Month) => string; 41 | }; 42 | variant?: { 43 | calendar?: { 44 | main?: ButtonVariant; 45 | selected?: ButtonVariant; 46 | }; 47 | chevrons?: ButtonVariant; 48 | }; 49 | minDate?: Date; 50 | maxDate?: Date; 51 | disabledDates?: Date[]; 52 | }; 53 | 54 | type ButtonVariant = "default" | "outline" | "ghost" | "link" | "destructive" | "secondary" | null | undefined; 55 | 56 | function MonthPicker({ 57 | onMonthSelect, 58 | selectedMonth, 59 | minDate, 60 | maxDate, 61 | disabledDates, 62 | callbacks, 63 | onYearBackward, 64 | onYearForward, 65 | variant, 66 | className, 67 | ...props 68 | }: React.HTMLAttributes & MonthCalProps) { 69 | return ( 70 |

71 |

72 |

73 | 84 |

85 |

86 |

87 | ); 88 | } 89 | 90 | function MonthCal({ selectedMonth, onMonthSelect, callbacks, variant, minDate, maxDate, disabledDates, onYearBackward, onYearForward }: MonthCalProps) { 91 | const [year, setYear] = React.useState(selectedMonth?.getFullYear() ?? new Date().getFullYear()); 92 | const [month, setMonth] = React.useState(selectedMonth?.getMonth() ?? new Date().getMonth()); 93 | const [menuYear, setMenuYear] = React.useState(year); 94 | 95 | if (minDate && maxDate && minDate > maxDate) minDate = maxDate; 96 | 97 | const disabledDatesMapped = disabledDates?.map((d) => { 98 | return { year: d.getFullYear(), month: d.getMonth() }; 99 | }); 100 | 101 | return ( 102 | <> 103 |

104 |

{callbacks?.yearLabel ? callbacks?.yearLabel(menuYear) : menuYear}

105 |

106 | 115 | 124 |

125 |

126 | 127 | 128 | {MONTHS.map((monthRow, a) => { 129 | return ( 130 | 131 | {monthRow.map((m) => { 132 | return ( 133 | 156 | ); 157 | })} 158 | 159 | ); 160 | })} 161 | 162 |

137 | 155 |

163 | 164 | ); 165 | } 166 | 167 | MonthPicker.displayName = "MonthPicker"; 168 | 169 | export { MonthPicker }; 170 | -------------------------------------------------------------------------------- /src/components/ui/dropdown-menu.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" 3 | import { Check, ChevronRight, Circle } from "lucide-react" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const DropdownMenu = DropdownMenuPrimitive.Root 8 | 9 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger 10 | 11 | const DropdownMenuGroup = DropdownMenuPrimitive.Group 12 | 13 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal 14 | 15 | const DropdownMenuSub = DropdownMenuPrimitive.Sub 16 | 17 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup 18 | 19 | const DropdownMenuSubTrigger = React.forwardRef< 20 | React.ElementRef, 21 | React.ComponentPropsWithoutRef & { 22 | inset?: boolean 23 | } 24 | >(({ className, inset, children, ...props }, ref) => ( 25 | 34 | {children} 35 | 36 | 37 | )) 38 | DropdownMenuSubTrigger.displayName = 39 | DropdownMenuPrimitive.SubTrigger.displayName 40 | 41 | const DropdownMenuSubContent = React.forwardRef< 42 | React.ElementRef, 43 | React.ComponentPropsWithoutRef 44 | >(({ className, ...props }, ref) => ( 45 | 53 | )) 54 | DropdownMenuSubContent.displayName = 55 | DropdownMenuPrimitive.SubContent.displayName 56 | 57 | const DropdownMenuContent = React.forwardRef< 58 | React.ElementRef, 59 | React.ComponentPropsWithoutRef 60 | >(({ className, sideOffset = 4, ...props }, ref) => ( 61 | 62 | 71 | 72 | )) 73 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName 74 | 75 | const DropdownMenuItem = React.forwardRef< 76 | React.ElementRef, 77 | React.ComponentPropsWithoutRef & { 78 | inset?: boolean 79 | } 80 | >(({ className, inset, ...props }, ref) => ( 81 | 90 | )) 91 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName 92 | 93 | const DropdownMenuCheckboxItem = React.forwardRef< 94 | React.ElementRef, 95 | React.ComponentPropsWithoutRef 96 | >(({ className, children, checked, ...props }, ref) => ( 97 | 106 | 107 | 108 | 109 | 110 | 111 | {children} 112 | 113 | )) 114 | DropdownMenuCheckboxItem.displayName = 115 | DropdownMenuPrimitive.CheckboxItem.displayName 116 | 117 | const DropdownMenuRadioItem = React.forwardRef< 118 | React.ElementRef, 119 | React.ComponentPropsWithoutRef 120 | >(({ className, children, ...props }, ref) => ( 121 | 129 | 130 | 131 | 132 | 133 | 134 | {children} 135 | 136 | )) 137 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName 138 | 139 | const DropdownMenuLabel = React.forwardRef< 140 | React.ElementRef, 141 | React.ComponentPropsWithoutRef & { 142 | inset?: boolean 143 | } 144 | >(({ className, inset, ...props }, ref) => ( 145 | 154 | )) 155 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName 156 | 157 | const DropdownMenuSeparator = React.forwardRef< 158 | React.ElementRef, 159 | React.ComponentPropsWithoutRef 160 | >(({ className, ...props }, ref) => ( 161 | 166 | )) 167 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName 168 | 169 | const DropdownMenuShortcut = ({ 170 | className, 171 | ...props 172 | }: React.HTMLAttributes) => { 173 | return ( 174 | 178 | ) 179 | } 180 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut" 181 | 182 | export { 183 | DropdownMenu, 184 | DropdownMenuTrigger, 185 | DropdownMenuContent, 186 | DropdownMenuItem, 187 | DropdownMenuCheckboxItem, 188 | DropdownMenuRadioItem, 189 | DropdownMenuLabel, 190 | DropdownMenuSeparator, 191 | DropdownMenuShortcut, 192 | DropdownMenuGroup, 193 | DropdownMenuPortal, 194 | DropdownMenuSub, 195 | DropdownMenuSubContent, 196 | DropdownMenuSubTrigger, 197 | DropdownMenuRadioGroup, 198 | } 199 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Monthpicker & Monthrangepicker for shadcn-ui 2 | 3 | A fully customizable `Monthpicker` and `Monthrangepicker` component built for [shadcn-ui](https://ui.shadcn.com/). 4 | ([Radix](https://www.radix-ui.com/), [Tailwind CSS](https://tailwindcss.com/)). 5 | 6 | ![header image](https://preview.redd.it/fully-customizable-month-picker-month-range-picker-v0-mxkkb99531ld1.jpg?width=2560&format=pjpg&auto=webp&s=7265043badad889440bf4daadabd560565af4de8) 7 | 8 | [Try out the demo!](https://greenk.dev/demos/monthpicker) 9 | 10 | ## Installation 11 | 12 | ### CLI Installation: 13 | 14 | Monthpicker: 15 | 16 | ``` 17 | npx shadcn@latest add "https://greenk.dev/r/monthpicker.json" 18 | ``` 19 | 20 | Monthrangepicker: 21 | 22 | ``` 23 | npx shadcn@latest add "https://greenk.dev/r/monthrangepicker.json" 24 | ``` 25 | 26 | Optionally you can wrap the picker in a [Popover](https://ui.shadcn.com/docs/components/popover): 27 | 28 | ``` 29 | npx shadcn@latest add popover 30 | ``` 31 | 32 | ### Manual Installation: 33 | 34 | The components require the following shadcn-ui components. 35 | 36 | - [Button](https://ui.shadcn.com/docs/components/button) 37 | - [Popover](https://ui.shadcn.com/docs/components/popover) (optional) 38 | 39 | Copy the components to the `components` folder of your project. 40 | 41 | Link to components: 42 | 43 | - [Monthpicker](https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/src/components/ui/monthpicker.tsx) 44 | - [Monthrangepicker](https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/src/components/ui/monthrangepicker.tsx) 45 | 46 | Also [Lucide React](https://lucide.dev/guide/packages/lucide-react) is requiered for the Icons. 47 | 48 | ## `Monthpicker` Component 49 | 50 | ### Example 51 | 52 | ```typescript 53 | import React from "react"; 54 | import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; 55 | import { Button } from "@/components/ui/button"; 56 | import { CalendarIcon } from "lucide-react"; 57 | import { format } from "date-fns/format"; 58 | import { cn } from "@/lib/utils"; 59 | import { MonthPicker } from "@/components/ui/monthpicker"; 60 | 61 | export default function Example() { 62 | const [month, setMonth] = React.useState(); 63 | 64 | return ; 65 | } 66 | ``` 67 | 68 | Use with shadcn-ui `Popover` component: 69 | 70 | ```typescript 71 | export default function Example() { 72 | const [date, setDate] = React.useState(); 73 | 74 | return ( 75 | 76 | 77 | 81 | 82 | 83 | 84 | 85 | 86 | ); 87 | } 88 | ``` 89 | 90 | ### Props 91 | 92 | | Prop | Type | Default | Description | 93 | | ---------------- | -------------------- | ------------- | ------------------------------------- | 94 | | `onMonthSelect` | (date: Date) => void | - | Called when a month has been selected | 95 | | `selectedMonth` | Date | Today’s Month | Month state for initialization | 96 | | `minDate` | Date | no limit | The minimum selectable date | 97 | | `maxDate` | Date | no limit | The maximum selectable date | 98 | | `disabledDates` | Date[] | - | Separate non-selectable months | 99 | | `callbacks` | object | - | See callbacks table | 100 | | `variant` | object | - | See variant table | 101 | | `onYearForward` | () => void | - | Called when calendar browsed forward | 102 | | `onYearBackward` | () => void | - | Called when calendar browsed backward | 103 | 104 |

105 |

callbacks

106 | 107 | | Prop | Type | Description | 108 | | ------------ | ------------------------ | --------------------------------- | 109 | | `yearLabel` | (year: number) => string | Used for styling the Year Label | 110 | | `monthLabel` | (month: Month) | Used for styling the Month Labels | 111 | 112 | ```typescript 113 | type Month = { number: number; name: string }; 114 | ``` 115 | 116 |

117 |

118 |

variant

119 | 120 | | Prop | Type | Description | 121 | | ---------- | ------------------------------------------------ | --------------------------------------------------------------------------------------- | 122 | | `calendar` | {`main: ButtonVariant, selected: ButtonVariant`} | Styling for the Month-buttons. `main` for non-selected & `selected` for selected Button | 123 | | `chevrons` | ButtonVariant | Styling for the backward- & forward-chevron buttons | 124 | 125 | ```typescript 126 | type ButtonVariant = "default" | "outline" | "ghost" | "link" | "destructive" | "secondary" | null | undefined; 127 | ``` 128 | 129 |

130 | 131 | ## `Monthrangepicker` Component 132 | 133 | ### Example 134 | 135 | ```typescript 136 | import React from "react"; 137 | import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; 138 | import { Button } from "@/components/ui/button"; 139 | import { CalendarIcon } from "lucide-react"; 140 | import { format } from "date-fns/format"; 141 | import { cn } from "@/lib/utils"; 142 | import { MonthRangePicker } from "@/components/ui/monthrangepicker"; 143 | 144 | export default function Example() { 145 | const [dates, setDates] = React.useState<{ start: Date; end: Date }>(); 146 | 147 | return ; 148 | } 149 | ``` 150 | 151 | Use with shadcn-ui `Popover` component: 152 | 153 | ```typescript 154 | export default function Example() { 155 | const [dates, setDates] = React.useState<{ start: Date; end: Date }>(); 156 | 157 | return ( 158 | 159 | 160 | 164 | 165 | 166 | 167 | 168 | 169 | ); 170 | } 171 | ``` 172 | 173 | ### Props 174 | 175 | | Prop | Type | Default | Description | 176 | | -------------------- | -------------------- | ------------- | -------------------------------------------------------------------------------------- | 177 | | `onMonthRangeSelect` | (date: Date) => void | - | Called when a month range has been selected | 178 | | `onStartMonthSelect` | (date: Date) => void | - | Called when the range start month has been selected and the range end is still pending | 179 | | `selectedMonthRange` | Date | Today’s Month | Month state for initialization | 180 | | `minDate` | Date | no limit | The minimum selectable date | 181 | | `maxDate` | Date | no limit | The maximum selectable date | 182 | | `callbacks` | object | - | See callbacks table | 183 | | `variant` | object | - | See variant table | 184 | | `onYearForward` | () => void | - | Called when calendar browsed forward | 185 | | `onYearBackward` | () => void | - | Called when calendar browsed backward | 186 | | `quickSelectors` | Object[] | - | See quickselectors table | 187 | | `showQuickSelectors` | boolean | true | Show/Hide the quickselectors | 188 | 189 |

190 |

quickselectors

191 | 192 | | Prop | Type | Description | 193 | | ------------ | --------------------------------- | -------------------------------------------- | 194 | | `label` | string | Label for the button | 195 | | `startMonth` | Date | Date for the range start month | 196 | | `endMonth` | Date | Date for the range end month | 197 | | `variant` | ButtonVariant | variant for the button | 198 | | `onClick` | (selector: QuickSelector) => void | Called when quick selection has been clicked | 199 | 200 |

201 | 202 |

203 |

callbacks

204 | 205 | | Prop | Type | Description | 206 | | ------------ | ------------------------ | --------------------------------- | 207 | | `yearLabel` | (year: number) => string | Used for styling the Year Label | 208 | | `monthLabel` | (month: Month) | Used for styling the Month Labels | 209 | 210 | ```typescript 211 | type Month = { number: number; name: string; yearOffset: number }; // yearOffset = 0 on the left calendar and 1 on the right side calendar 212 | ``` 213 | 214 |

215 | 216 |

217 |

variant

218 | 219 | | Prop | Type | Description | 220 | | ---------- | ------------------------------------------------ | --------------------------------------------------------------------------------------- | 221 | | `calendar` | {`main: ButtonVariant, selected: ButtonVariant`} | Styling for the Month-buttons. `main` for non-selected & `selected` for selected Button | 222 | | `chevrons` | ButtonVariant | Styling for the backward- & forward-chevron buttons | 223 | 224 | ```typescript 225 | type ButtonVariant = "default" | "outline" | "ghost" | "link" | "destructive" | "secondary" | null | undefined; 226 | ``` 227 | 228 |

229 | 230 | ## Example with shadcn `form` component 231 | 232 | You can use Monthpicker and Monthrangepicker with [shadcn forms](https://ui.shadcn.com/docs/components/form). 233 | A Form schema could look like this: 234 | 235 | ```typescript 236 | const FormSchema = z.object({ 237 | month: z.date(), 238 | monthrange: z.object({ 239 | start: z.date(), 240 | end: z.date(), 241 | }), 242 | }); 243 | ``` 244 | 245 | You can check out a full form example [here](https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/src/FormExample.tsx) 246 | -------------------------------------------------------------------------------- /public/r/monthrangepicker.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema/registry-item.json", 3 | "name": "monthrangepicker", 4 | "type": "registry:ui", 5 | "title": "Month Range Picker", 6 | "author": "@greenkdev", 7 | "description": "A month range picker component.", 8 | "dependencies": [ 9 | "lucide-react" 10 | ], 11 | "registryDependencies": [ 12 | "button" 13 | ], 14 | "files": [ 15 | { 16 | "path": "src/components/ui/monthrangepicker.tsx", 17 | "content": "\"use client\";\nimport * as React from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { Button, buttonVariants } from \"./button\";\nimport { cn } from \"@/lib/utils\";\n\nconst addMonths = (input: Date, months: number) => {\n const date = new Date(input);\n date.setDate(1);\n date.setMonth(date.getMonth() + months);\n date.setDate(Math.min(input.getDate(), getDaysInMonth(date.getFullYear(), date.getMonth() + 1)));\n return date;\n};\nconst getDaysInMonth = (year: number, month: number) => new Date(year, month, 0).getDate();\n\ntype Month = {\n number: number;\n name: string;\n yearOffset: number;\n};\n\nconst MONTHS: Month[][] = [\n [\n { number: 0, name: \"Jan\", yearOffset: 0 },\n { number: 1, name: \"Feb\", yearOffset: 0 },\n { number: 2, name: \"Mar\", yearOffset: 0 },\n { number: 3, name: \"Apr\", yearOffset: 0 },\n { number: 0, name: \"Jan\", yearOffset: 1 },\n { number: 1, name: \"Feb\", yearOffset: 1 },\n { number: 2, name: \"Mar\", yearOffset: 1 },\n { number: 3, name: \"Apr\", yearOffset: 1 },\n ],\n [\n { number: 4, name: \"May\", yearOffset: 0 },\n { number: 5, name: \"Jun\", yearOffset: 0 },\n { number: 6, name: \"Jul\", yearOffset: 0 },\n { number: 7, name: \"Aug\", yearOffset: 0 },\n { number: 4, name: \"May\", yearOffset: 1 },\n { number: 5, name: \"Jun\", yearOffset: 1 },\n { number: 6, name: \"Jul\", yearOffset: 1 },\n { number: 7, name: \"Aug\", yearOffset: 1 },\n ],\n [\n { number: 8, name: \"Sep\", yearOffset: 0 },\n { number: 9, name: \"Oct\", yearOffset: 0 },\n { number: 10, name: \"Nov\", yearOffset: 0 },\n { number: 11, name: \"Dec\", yearOffset: 0 },\n { number: 8, name: \"Sep\", yearOffset: 1 },\n { number: 9, name: \"Oct\", yearOffset: 1 },\n { number: 10, name: \"Nov\", yearOffset: 1 },\n { number: 11, name: \"Dec\", yearOffset: 1 },\n ],\n];\n\ntype QuickSelector = {\n label: string;\n startMonth: Date;\n endMonth: Date;\n variant?: ButtonVariant;\n onClick?: (selector: QuickSelector) => void;\n};\n\nconst QUICK_SELECTORS: QuickSelector[] = [\n { label: \"This year\", startMonth: new Date(new Date().getFullYear(), 0), endMonth: new Date(new Date().getFullYear(), 11) },\n { label: \"Last year\", startMonth: new Date(new Date().getFullYear() - 1, 0), endMonth: new Date(new Date().getFullYear() - 1, 11) },\n { label: \"Last 6 months\", startMonth: new Date(addMonths(new Date(), -6)), endMonth: new Date() },\n { label: \"Last 12 months\", startMonth: new Date(addMonths(new Date(), -12)), endMonth: new Date() },\n];\n\ntype MonthRangeCalProps = {\n selectedMonthRange?: { start: Date; end: Date };\n onStartMonthSelect?: (date: Date) => void;\n onMonthRangeSelect?: ({ start, end }: { start: Date; end: Date }) => void;\n onYearForward?: () => void;\n onYearBackward?: () => void;\n callbacks?: {\n yearLabel?: (year: number) => string;\n monthLabel?: (month: Month) => string;\n };\n variant?: {\n calendar?: {\n main?: ButtonVariant;\n selected?: ButtonVariant;\n };\n chevrons?: ButtonVariant;\n };\n minDate?: Date;\n maxDate?: Date;\n quickSelectors?: QuickSelector[];\n showQuickSelectors?: boolean;\n};\n\ntype ButtonVariant = \"default\" | \"outline\" | \"ghost\" | \"link\" | \"destructive\" | \"secondary\" | null | undefined;\n\nfunction MonthRangePicker({\n onMonthRangeSelect,\n onStartMonthSelect,\n callbacks,\n selectedMonthRange,\n onYearBackward,\n onYearForward,\n variant,\n minDate,\n maxDate,\n quickSelectors,\n showQuickSelectors,\n className,\n ...props\n}: React.HTMLAttributes & MonthRangeCalProps) {\n return (\n

\n \n

\n );\n}\n\nfunction MonthRangeCal({\n selectedMonthRange,\n onMonthRangeSelect,\n onStartMonthSelect,\n callbacks,\n variant,\n minDate,\n maxDate,\n quickSelectors = QUICK_SELECTORS,\n showQuickSelectors = true,\n onYearBackward,\n onYearForward,\n}: MonthRangeCalProps) {\n const [startYear, setStartYear] = React.useState(selectedMonthRange?.start.getFullYear() ?? new Date().getFullYear());\n const [startMonth, setStartMonth] = React.useState(selectedMonthRange?.start?.getMonth() ?? new Date().getMonth());\n const [endYear, setEndYear] = React.useState(selectedMonthRange?.end?.getFullYear() ?? new Date().getFullYear() + 1);\n const [endMonth, setEndMonth] = React.useState(selectedMonthRange?.end?.getMonth() ?? new Date().getMonth());\n const [rangePending, setRangePending] = React.useState(false);\n const [endLocked, setEndLocked] = React.useState(true);\n const [menuYear, setMenuYear] = React.useState(startYear);\n\n if (minDate && maxDate && minDate > maxDate) minDate = maxDate;\n\n return (\n

{callbacks?.yearLabel ? callbacks?.yearLabel(menuYear) : menuYear}

{callbacks?.yearLabel ? callbacks?.yearLabel(menuYear + 1) : menuYear + 1}

\n \n \n {MONTHS.map((monthRow, a) => {\n return (\n \n {monthRow.map((m, i) => {\n return (\n startYear || (menuYear + m.yearOffset == startYear && m.number > startMonth)) &&\n (menuYear + m.yearOffset < endYear || (menuYear + m.yearOffset == endYear && m.number < endMonth)) &&\n (rangePending || endLocked)\n ? \"text-accent-foreground bg-accent\"\n : \"\"\n ),\n menuYear + m.yearOffset == startYear && m.number == startMonth && (rangePending || endLocked)\n ? \"text-accent-foreground bg-accent rounded-l-md\"\n : \"\"\n ),\n menuYear + m.yearOffset == endYear &&\n m.number == endMonth &&\n (rangePending || endLocked) &&\n menuYear + m.yearOffset >= startYear &&\n m.number >= startMonth\n ? \"text-accent-foreground bg-accent rounded-r-md\"\n : \"\"\n ),\n i == 3 ? \"mr-2\" : i == 4 ? \"ml-2\" : \"\"\n )}\n onMouseEnter={() => {\n if (rangePending && !endLocked) {\n setEndYear(menuYear + m.yearOffset);\n setEndMonth(m.number);\n }\n }}\n >\n {\n if (rangePending) {\n if (menuYear + m.yearOffset < startYear || (menuYear + m.yearOffset == startYear && m.number < startMonth)) {\n setRangePending(true);\n setEndLocked(false);\n setStartMonth(m.number);\n setStartYear(menuYear + m.yearOffset);\n setEndYear(menuYear + m.yearOffset);\n setEndMonth(m.number);\n if (onStartMonthSelect) onStartMonthSelect(new Date(menuYear + m.yearOffset, m.number));\n } else {\n setRangePending(false);\n setEndLocked(true);\n // Event fire data selected\n\n if (onMonthRangeSelect)\n onMonthRangeSelect({ start: new Date(startYear, startMonth), end: new Date(menuYear + m.yearOffset, m.number) });\n }\n } else {\n setRangePending(true);\n setEndLocked(false);\n setStartMonth(m.number);\n setStartYear(menuYear + m.yearOffset);\n setEndYear(menuYear + m.yearOffset);\n setEndMonth(m.number);\n if (onStartMonthSelect) onStartMonthSelect(new Date(menuYear + m.yearOffset, m.number));\n }\n }}\n disabled={\n (maxDate\n ? menuYear + m.yearOffset > maxDate?.getFullYear() || (menuYear + m.yearOffset == maxDate?.getFullYear() && m.number > maxDate.getMonth())\n : false) ||\n (minDate\n ? menuYear + m.yearOffset < minDate?.getFullYear() || (menuYear + m.yearOffset == minDate?.getFullYear() && m.number < minDate.getMonth())\n : false)\n }\n className={cn(\n buttonVariants({\n variant:\n (startMonth == m.number && menuYear + m.yearOffset == startYear) ||\n (endMonth == m.number && menuYear + m.yearOffset == endYear && !rangePending)\n ? variant?.calendar?.selected ?? \"default\"\n : variant?.calendar?.main ?? \"ghost\",\n }),\n \"h-full w-full p-0 font-normal aria-selected:opacity-100\"\n )}\n >\n {callbacks?.monthLabel ? callbacks.monthLabel(m) : m.name}\n \n \n );\n })}\n \n );\n })}\n \n

\n\n {showQuickSelectors ? (\n

\n {quickSelectors.map((s) => {\n return (\n {\n setStartYear(s.startMonth.getFullYear());\n setStartMonth(s.startMonth.getMonth());\n setEndYear(s.endMonth.getFullYear());\n setEndMonth(s.endMonth.getMonth());\n setRangePending(false);\n setEndLocked(true);\n if (onMonthRangeSelect) onMonthRangeSelect({ start: s.startMonth, end: s.endMonth });\n if (s.onClick) s.onClick(s);\n }}\n key={s.label}\n variant={s.variant ?? \"outline\"}\n >\n {s.label}\n \n );\n })}\n

\n ) : null}\n

\n );\n}\n\nMonthRangePicker.displayName = \"MonthRangePicker\";\n\nexport { MonthRangePicker };\n", 18 | "type": "registry:ui" 19 | } 20 | ] 21 | } -------------------------------------------------------------------------------- /src/components/ui/monthrangepicker.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import * as React from "react"; 3 | import { ChevronLeft, ChevronRight } from "lucide-react"; 4 | import { Button, buttonVariants } from "./button"; 5 | import { cn } from "@/lib/utils"; 6 | 7 | const addMonths = (input: Date, months: number) => { 8 | const date = new Date(input); 9 | date.setDate(1); 10 | date.setMonth(date.getMonth() + months); 11 | date.setDate(Math.min(input.getDate(), getDaysInMonth(date.getFullYear(), date.getMonth() + 1))); 12 | return date; 13 | }; 14 | const getDaysInMonth = (year: number, month: number) => new Date(year, month, 0).getDate(); 15 | 16 | type Month = { 17 | number: number; 18 | name: string; 19 | yearOffset: number; 20 | }; 21 | 22 | const MONTHS: Month[][] = [ 23 | [ 24 | { number: 0, name: "Jan", yearOffset: 0 }, 25 | { number: 1, name: "Feb", yearOffset: 0 }, 26 | { number: 2, name: "Mar", yearOffset: 0 }, 27 | { number: 3, name: "Apr", yearOffset: 0 }, 28 | { number: 0, name: "Jan", yearOffset: 1 }, 29 | { number: 1, name: "Feb", yearOffset: 1 }, 30 | { number: 2, name: "Mar", yearOffset: 1 }, 31 | { number: 3, name: "Apr", yearOffset: 1 }, 32 | ], 33 | [ 34 | { number: 4, name: "May", yearOffset: 0 }, 35 | { number: 5, name: "Jun", yearOffset: 0 }, 36 | { number: 6, name: "Jul", yearOffset: 0 }, 37 | { number: 7, name: "Aug", yearOffset: 0 }, 38 | { number: 4, name: "May", yearOffset: 1 }, 39 | { number: 5, name: "Jun", yearOffset: 1 }, 40 | { number: 6, name: "Jul", yearOffset: 1 }, 41 | { number: 7, name: "Aug", yearOffset: 1 }, 42 | ], 43 | [ 44 | { number: 8, name: "Sep", yearOffset: 0 }, 45 | { number: 9, name: "Oct", yearOffset: 0 }, 46 | { number: 10, name: "Nov", yearOffset: 0 }, 47 | { number: 11, name: "Dec", yearOffset: 0 }, 48 | { number: 8, name: "Sep", yearOffset: 1 }, 49 | { number: 9, name: "Oct", yearOffset: 1 }, 50 | { number: 10, name: "Nov", yearOffset: 1 }, 51 | { number: 11, name: "Dec", yearOffset: 1 }, 52 | ], 53 | ]; 54 | 55 | type QuickSelector = { 56 | label: string; 57 | startMonth: Date; 58 | endMonth: Date; 59 | variant?: ButtonVariant; 60 | onClick?: (selector: QuickSelector) => void; 61 | }; 62 | 63 | const QUICK_SELECTORS: QuickSelector[] = [ 64 | { label: "This year", startMonth: new Date(new Date().getFullYear(), 0), endMonth: new Date(new Date().getFullYear(), 11) }, 65 | { label: "Last year", startMonth: new Date(new Date().getFullYear() - 1, 0), endMonth: new Date(new Date().getFullYear() - 1, 11) }, 66 | { label: "Last 6 months", startMonth: new Date(addMonths(new Date(), -6)), endMonth: new Date() }, 67 | { label: "Last 12 months", startMonth: new Date(addMonths(new Date(), -12)), endMonth: new Date() }, 68 | ]; 69 | 70 | type MonthRangeCalProps = { 71 | selectedMonthRange?: { start: Date; end: Date }; 72 | onStartMonthSelect?: (date: Date) => void; 73 | onMonthRangeSelect?: ({ start, end }: { start: Date; end: Date }) => void; 74 | onYearForward?: () => void; 75 | onYearBackward?: () => void; 76 | callbacks?: { 77 | yearLabel?: (year: number) => string; 78 | monthLabel?: (month: Month) => string; 79 | }; 80 | variant?: { 81 | calendar?: { 82 | main?: ButtonVariant; 83 | selected?: ButtonVariant; 84 | }; 85 | chevrons?: ButtonVariant; 86 | }; 87 | minDate?: Date; 88 | maxDate?: Date; 89 | quickSelectors?: QuickSelector[]; 90 | showQuickSelectors?: boolean; 91 | }; 92 | 93 | type ButtonVariant = "default" | "outline" | "ghost" | "link" | "destructive" | "secondary" | null | undefined; 94 | 95 | function MonthRangePicker({ 96 | onMonthRangeSelect, 97 | onStartMonthSelect, 98 | callbacks, 99 | selectedMonthRange, 100 | onYearBackward, 101 | onYearForward, 102 | variant, 103 | minDate, 104 | maxDate, 105 | quickSelectors, 106 | showQuickSelectors, 107 | className, 108 | ...props 109 | }: React.HTMLAttributes & MonthRangeCalProps) { 110 | return ( 111 |

112 |

113 |

114 | 127 |

128 |

129 |

130 | ); 131 | } 132 | 133 | function MonthRangeCal({ 134 | selectedMonthRange, 135 | onMonthRangeSelect, 136 | onStartMonthSelect, 137 | callbacks, 138 | variant, 139 | minDate, 140 | maxDate, 141 | quickSelectors = QUICK_SELECTORS, 142 | showQuickSelectors = true, 143 | onYearBackward, 144 | onYearForward, 145 | }: MonthRangeCalProps) { 146 | const [startYear, setStartYear] = React.useState(selectedMonthRange?.start.getFullYear() ?? new Date().getFullYear()); 147 | const [startMonth, setStartMonth] = React.useState(selectedMonthRange?.start?.getMonth() ?? new Date().getMonth()); 148 | const [endYear, setEndYear] = React.useState(selectedMonthRange?.end?.getFullYear() ?? new Date().getFullYear() + 1); 149 | const [endMonth, setEndMonth] = React.useState(selectedMonthRange?.end?.getMonth() ?? new Date().getMonth()); 150 | const [rangePending, setRangePending] = React.useState(false); 151 | const [endLocked, setEndLocked] = React.useState(true); 152 | const [menuYear, setMenuYear] = React.useState(startYear); 153 | 154 | if (minDate && maxDate && minDate > maxDate) minDate = maxDate; 155 | 156 | return ( 157 |

158 |

159 |

160 |

{callbacks?.yearLabel ? callbacks?.yearLabel(menuYear) : menuYear}

161 |

162 | 171 | 180 |

181 |

{callbacks?.yearLabel ? callbacks?.yearLabel(menuYear + 1) : menuYear + 1}

182 |

183 | 184 | 185 | {MONTHS.map((monthRow, a) => { 186 | return ( 187 | 188 | {monthRow.map((m, i) => { 189 | return ( 190 | 275 | ); 276 | })} 277 | 278 | ); 279 | })} 280 | 281 |

startYear || (menuYear + m.yearOffset == startYear && m.number > startMonth)) && 198 | (menuYear + m.yearOffset < endYear || (menuYear + m.yearOffset == endYear && m.number < endMonth)) && 199 | (rangePending || endLocked) 200 | ? "text-accent-foreground bg-accent" 201 | : "" 202 | ), 203 | menuYear + m.yearOffset == startYear && m.number == startMonth && (rangePending || endLocked) 204 | ? "text-accent-foreground bg-accent rounded-l-md" 205 | : "" 206 | ), 207 | menuYear + m.yearOffset == endYear && 208 | m.number == endMonth && 209 | (rangePending || endLocked) && 210 | menuYear + m.yearOffset >= startYear && 211 | m.number >= startMonth 212 | ? "text-accent-foreground bg-accent rounded-r-md" 213 | : "" 214 | ), 215 | i == 3 ? "mr-2" : i == 4 ? "ml-2" : "" 216 | )} 217 | onMouseEnter={() => { 218 | if (rangePending && !endLocked) { 219 | setEndYear(menuYear + m.yearOffset); 220 | setEndMonth(m.number); 221 | } 222 | }} 223 | > 224 | 274 |

282 |

283 | 284 | {showQuickSelectors ? ( 285 |

286 | {quickSelectors.map((s) => { 287 | return ( 288 | 304 | ); 305 | })} 306 |

307 | ) : null} 308 |

309 | ); 310 | } 311 | 312 | MonthRangePicker.displayName = "MonthRangePicker"; 313 | 314 | export { MonthRangePicker }; 315 | --------------------------------------------------------------------------------

Components

Form Example