https://github.com/gr3enk/shadcn-ui-monthpicker
A Monthpicker & Monthrangepicker component based on shadcn/ui
https://github.com/gr3enk/shadcn-ui-monthpicker
component components javascript month picker range rangepicker react reactjs shadcn shadcn-react shadcn-ui shadcnui typescript
Last synced: 6 months ago
JSON representation
A Monthpicker & Monthrangepicker component based on shadcn/ui
- Host: GitHub
- URL: https://github.com/gr3enk/shadcn-ui-monthpicker
- Owner: gr3enk
- Created: 2024-08-25T20:06:21.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-24T09:26:58.000Z (6 months ago)
- Last Synced: 2025-04-01T11:51:02.822Z (6 months ago)
- Topics: component, components, javascript, month, picker, range, rangepicker, react, reactjs, shadcn, shadcn-react, shadcn-ui, shadcnui, typescript
- Language: TypeScript
- Homepage: https://greenk.dev/demos/monthpicker
- Size: 213 KB
- Stars: 46
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-shadcnui - Github
README
# Monthpicker & Monthrangepicker for shadcn-ui
A fully customizable `Monthpicker` and `Monthrangepicker` component built for [shadcn-ui](https://ui.shadcn.com/).
([Radix](https://www.radix-ui.com/), [Tailwind CSS](https://tailwindcss.com/)).
[Try out the demo!](https://greenk.dev/demos/monthpicker)
## Installation
### CLI Installation:
Monthpicker:
```
npx shadcn@latest add "https://greenk.dev/r/monthpicker.json"
```
Monthrangepicker:
```
npx shadcn@latest add "https://greenk.dev/r/monthrangepicker.json"
```
Optionally you can wrap the picker in a [Popover](https://ui.shadcn.com/docs/components/popover):
```
npx shadcn@latest add popover
```
### Manual Installation:
The components require the following shadcn-ui components.
- [Button](https://ui.shadcn.com/docs/components/button)
- [Popover](https://ui.shadcn.com/docs/components/popover) (optional)
Copy the components to the `components` folder of your project.
Link to components:
- [Monthpicker](https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/src/components/ui/monthpicker.tsx)
- [Monthrangepicker](https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/src/components/ui/monthrangepicker.tsx)
Also [Lucide React](https://lucide.dev/guide/packages/lucide-react) is requiered for the Icons.
## `Monthpicker` Component
### Example
```typescript
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();
return ;
}
```
Use with shadcn-ui `Popover` component:
```typescript
export default function Example() {
const [date, setDate] = React.useState();
return (
{date ? format(date, "MMM yyyy") : Pick a month}
);
}
```
### Props
| Prop | Type | Default | Description |
| ---------------- | -------------------- | ------------- | ------------------------------------- |
| `onMonthSelect` | (date: Date) => void | - | Called when a month has been selected |
| `selectedMonth` | Date | Today’s Month | Month state for initialization |
| `minDate` | Date | no limit | The minimum selectable date |
| `maxDate` | Date | no limit | The maximum selectable date |
| `disabledDates` | Date[] | - | Separate non-selectable months |
| `callbacks` | object | - | See callbacks table |
| `variant` | object | - | See variant table |
| `onYearForward` | () => void | - | Called when calendar browsed forward |
| `onYearBackward` | () => void | - | Called when calendar browsed backward |
callbacks
| Prop | Type | Description |
| ------------ | ------------------------ | --------------------------------- |
| `yearLabel` | (year: number) => string | Used for styling the Year Label |
| `monthLabel` | (month: Month) | Used for styling the Month Labels |
```typescript
type Month = { number: number; name: string };
```
variant
| Prop | Type | Description |
| ---------- | ------------------------------------------------ | --------------------------------------------------------------------------------------- |
| `calendar` | {`main: ButtonVariant, selected: ButtonVariant`} | Styling for the Month-buttons. `main` for non-selected & `selected` for selected Button |
| `chevrons` | ButtonVariant | Styling for the backward- & forward-chevron buttons |
```typescript
type ButtonVariant = "default" | "outline" | "ghost" | "link" | "destructive" | "secondary" | null | undefined;
```
## `Monthrangepicker` Component
### Example
```typescript
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 ;
}
```
Use with shadcn-ui `Popover` component:
```typescript
export default function Example() {
const [dates, setDates] = React.useState<{ start: Date; end: Date }>();
return (
{dates ? `${format(dates.start, "MMM yyyy")} - ${format(dates.end, "MMM yyyy")}` : Pick a month range}
);
}
```
### Props
| Prop | Type | Default | Description |
| -------------------- | -------------------- | ------------- | -------------------------------------------------------------------------------------- |
| `onMonthRangeSelect` | (date: Date) => void | - | Called when a month range has been selected |
| `onStartMonthSelect` | (date: Date) => void | - | Called when the range start month has been selected and the range end is still pending |
| `selectedMonthRange` | Date | Today’s Month | Month state for initialization |
| `minDate` | Date | no limit | The minimum selectable date |
| `maxDate` | Date | no limit | The maximum selectable date |
| `callbacks` | object | - | See callbacks table |
| `variant` | object | - | See variant table |
| `onYearForward` | () => void | - | Called when calendar browsed forward |
| `onYearBackward` | () => void | - | Called when calendar browsed backward |
| `quickSelectors` | Object[] | - | See quickselectors table |
| `showQuickSelectors` | boolean | true | Show/Hide the quickselectors |
quickselectors
| Prop | Type | Description |
| ------------ | --------------------------------- | -------------------------------------------- |
| `label` | string | Label for the button |
| `startMonth` | Date | Date for the range start month |
| `endMonth` | Date | Date for the range end month |
| `variant` | ButtonVariant | variant for the button |
| `onClick` | (selector: QuickSelector) => void | Called when quick selection has been clicked |
callbacks
| Prop | Type | Description |
| ------------ | ------------------------ | --------------------------------- |
| `yearLabel` | (year: number) => string | Used for styling the Year Label |
| `monthLabel` | (month: Month) | Used for styling the Month Labels |
```typescript
type Month = { number: number; name: string; yearOffset: number }; // yearOffset = 0 on the left calendar and 1 on the right side calendar
```
variant
| Prop | Type | Description |
| ---------- | ------------------------------------------------ | --------------------------------------------------------------------------------------- |
| `calendar` | {`main: ButtonVariant, selected: ButtonVariant`} | Styling for the Month-buttons. `main` for non-selected & `selected` for selected Button |
| `chevrons` | ButtonVariant | Styling for the backward- & forward-chevron buttons |
```typescript
type ButtonVariant = "default" | "outline" | "ghost" | "link" | "destructive" | "secondary" | null | undefined;
```
## Example with shadcn `form` component
You can use Monthpicker and Monthrangepicker with [shadcn forms](https://ui.shadcn.com/docs/components/form).
A Form schema could look like this:
```typescript
const FormSchema = z.object({
month: z.date(),
monthrange: z.object({
start: z.date(),
end: z.date(),
}),
});
```
You can check out a full form example [here](https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/src/FormExample.tsx)