{"id":26661291,"url":"https://github.com/gr3enk/shadcn-ui-monthpicker","last_synced_at":"2025-04-11T17:22:37.907Z","repository":{"id":254802844,"uuid":"847434022","full_name":"gr3enk/shadcn-ui-monthpicker","owner":"gr3enk","description":"A Monthpicker \u0026 Monthrangepicker component based on shadcn/ui","archived":false,"fork":false,"pushed_at":"2025-03-24T09:26:58.000Z","size":218,"stargazers_count":46,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-01T11:51:02.822Z","etag":null,"topics":["component","components","javascript","month","picker","range","rangepicker","react","reactjs","shadcn","shadcn-react","shadcn-ui","shadcnui","typescript"],"latest_commit_sha":null,"homepage":"https://greenk.dev/demos/monthpicker","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gr3enk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-25T20:06:21.000Z","updated_at":"2025-03-27T11:41:23.000Z","dependencies_parsed_at":"2024-08-26T08:01:58.650Z","dependency_job_id":"788e0d95-54f5-44d2-91a7-e3b6ad2fb9a6","html_url":"https://github.com/gr3enk/shadcn-ui-monthpicker","commit_stats":null,"previous_names":["gr3enk/shadcn-ui-monthpicker"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gr3enk%2Fshadcn-ui-monthpicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gr3enk%2Fshadcn-ui-monthpicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gr3enk%2Fshadcn-ui-monthpicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gr3enk%2Fshadcn-ui-monthpicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gr3enk","download_url":"https://codeload.github.com/gr3enk/shadcn-ui-monthpicker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248447982,"owners_count":21105213,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","components","javascript","month","picker","range","rangepicker","react","reactjs","shadcn","shadcn-react","shadcn-ui","shadcnui","typescript"],"created_at":"2025-03-25T13:15:52.207Z","updated_at":"2025-04-11T17:22:37.875Z","avatar_url":"https://github.com/gr3enk.png","language":"TypeScript","funding_links":[],"categories":["Components \u0026 Libraries"],"sub_categories":[],"readme":"# Monthpicker \u0026 Monthrangepicker for shadcn-ui\n\nA fully customizable `Monthpicker` and `Monthrangepicker` component built for [shadcn-ui](https://ui.shadcn.com/).\n([Radix](https://www.radix-ui.com/), [Tailwind CSS](https://tailwindcss.com/)).\n\n![header image](https://preview.redd.it/fully-customizable-month-picker-month-range-picker-v0-mxkkb99531ld1.jpg?width=2560\u0026format=pjpg\u0026auto=webp\u0026s=7265043badad889440bf4daadabd560565af4de8)\n\n[Try out the demo!](https://greenk.dev/demos/monthpicker)\n\n## Installation\n\n### CLI Installation:\n\nMonthpicker:\n\n```\nnpx shadcn@latest add \"https://greenk.dev/r/monthpicker.json\"\n```\n\nMonthrangepicker:\n\n```\nnpx shadcn@latest add \"https://greenk.dev/r/monthrangepicker.json\"\n```\n\nOptionally you can wrap the picker in a [Popover](https://ui.shadcn.com/docs/components/popover):\n\n```\nnpx shadcn@latest add popover\n```\n\n### Manual Installation:\n\nThe components require the following shadcn-ui components.\n\n-   [Button](https://ui.shadcn.com/docs/components/button)\n-   [Popover](https://ui.shadcn.com/docs/components/popover) (optional)\n\nCopy the components to the `components` folder of your project.\n\nLink to components:\n\n-   [Monthpicker](https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/src/components/ui/monthpicker.tsx)\n-   [Monthrangepicker](https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/src/components/ui/monthrangepicker.tsx)\n\nAlso [Lucide React](https://lucide.dev/guide/packages/lucide-react) is requiered for the Icons.\n\n## `Monthpicker` Component\n\n### Example\n\n```typescript\nimport React from \"react\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { Button } from \"@/components/ui/button\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { format } from \"date-fns/format\";\nimport { cn } from \"@/lib/utils\";\nimport { MonthPicker } from \"@/components/ui/monthpicker\";\n\nexport default function Example() {\n    const [date, setDate] = React.useState\u003cDate\u003e();\n\n    return \u003cMonthPicker onMonthSelect={setDate} selectedDate={date} /\u003e;\n}\n```\n\nUse with shadcn-ui `Popover` component:\n\n```typescript\nexport default function Example() {\n    const [date, setDate] = React.useState\u003cDate\u003e();\n\n    return (\n        \u003cPopover\u003e\n            \u003cPopoverTrigger asChild\u003e\n                \u003cButton variant={\"outline\"} className={cn(\"w-[280px] justify-start text-left font-normal\", !date \u0026\u0026 \"text-muted-foreground\")}\u003e\n                    \u003cCalendarIcon className=\"mr-2 h-4 w-4\" /\u003e\n                    {date ? format(date, \"MMM yyyy\") : \u003cspan\u003ePick a month\u003c/span\u003e}\n                \u003c/Button\u003e\n            \u003c/PopoverTrigger\u003e\n            \u003cPopoverContent className=\"w-auto p-0\"\u003e\n                \u003cMonthPicker onMonthSelect={setDate} selectedMonth={date} /\u003e\n            \u003c/PopoverContent\u003e\n        \u003c/Popover\u003e\n    );\n}\n```\n\n### Props\n\n| Prop             | Type                 | Default       | Description                           |\n| ---------------- | -------------------- | ------------- | ------------------------------------- |\n| `onMonthSelect`  | (date: Date) =\u003e void | -             | Called when a month has been selected |\n| `selectedMonth`  | Date                 | Today’s Month | Month state for initialization        |\n| `minDate`        | Date                 | no limit      | The minimum selectable date           |\n| `maxDate`        | Date                 | no limit      | The maximum selectable date           |\n| `disabledDates`  | Date[]               | -             | Separate non-selectable months        |\n| `callbacks`      | object               | -             | See callbacks table                   |\n| `variant`        | object               | -             | See variant table                     |\n| `onYearForward`  | () =\u003e void           | -             | Called when calendar browsed forward  |\n| `onYearBackward` | () =\u003e void           | -             | Called when calendar browsed backward |\n\n\u003cdetails\u003e\n  \u003csummary\u003ecallbacks\u003c/summary\u003e\n\n| Prop         | Type                     | Description                       |\n| ------------ | ------------------------ | --------------------------------- |\n| `yearLabel`  | (year: number) =\u003e string | Used for styling the Year Label   |\n| `monthLabel` | (month: Month)           | Used for styling the Month Labels |\n\n```typescript\ntype Month = { number: number; name: string };\n```\n\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003evariant\u003c/summary\u003e\n\n| Prop       | Type                                             | Description                                                                             |\n| ---------- | ------------------------------------------------ | --------------------------------------------------------------------------------------- |\n| `calendar` | {`main: ButtonVariant, selected: ButtonVariant`} | Styling for the Month-buttons. `main` for non-selected \u0026 `selected` for selected Button |\n| `chevrons` | ButtonVariant                                    | Styling for the backward- \u0026 forward-chevron buttons                                     |\n\n```typescript\ntype ButtonVariant = \"default\" | \"outline\" | \"ghost\" | \"link\" | \"destructive\" | \"secondary\" | null | undefined;\n```\n\n\u003c/details\u003e\n\n## `Monthrangepicker` Component\n\n### Example\n\n```typescript\nimport React from \"react\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { Button } from \"@/components/ui/button\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { format } from \"date-fns/format\";\nimport { cn } from \"@/lib/utils\";\nimport { MonthRangePicker } from \"@/components/ui/monthrangepicker\";\n\nexport default function Example() {\n    const [dates, setDates] = React.useState\u003c{ start: Date; end: Date }\u003e();\n\n    return \u003cMonthRangePicker onMonthRangeSelect={setDates} selectedMonthRange={dates} /\u003e;\n}\n```\n\nUse with shadcn-ui `Popover` component:\n\n```typescript\nexport default function Example() {\n    const [dates, setDates] = React.useState\u003c{ start: Date; end: Date }\u003e();\n\n    return (\n        \u003cPopover\u003e\n            \u003cPopoverTrigger asChild\u003e\n                \u003cButton variant={\"outline\"} className={cn(\"w-[280px] justify-start text-left font-normal\", !date \u0026\u0026 \"text-muted-foreground\")}\u003e\n                    \u003cCalendarIcon className=\"mr-2 h-4 w-4\" /\u003e\n                    {dates ? `${format(dates.start, \"MMM yyyy\")} - ${format(dates.end, \"MMM yyyy\")}` : \u003cspan\u003ePick a month range\u003c/span\u003e}\n                \u003c/Button\u003e\n            \u003c/PopoverTrigger\u003e\n            \u003cPopoverContent className=\"w-auto p-0\"\u003e\n                \u003cMonthRangePicker onMonthRangeSelect={setDates} selectedMonthRange={dates} /\u003e\n            \u003c/PopoverContent\u003e\n        \u003c/Popover\u003e\n    );\n}\n```\n\n### Props\n\n| Prop                 | Type                 | Default       | Description                                                                            |\n| -------------------- | -------------------- | ------------- | -------------------------------------------------------------------------------------- |\n| `onMonthRangeSelect` | (date: Date) =\u003e void | -             | Called when a month range has been selected                                            |\n| `onStartMonthSelect` | (date: Date) =\u003e void | -             | Called when the range start month has been selected and the range end is still pending |\n| `selectedMonthRange` | Date                 | Today’s Month | Month state for initialization                                                         |\n| `minDate`            | Date                 | no limit      | The minimum selectable date                                                            |\n| `maxDate`            | Date                 | no limit      | The maximum selectable date                                                            |\n| `callbacks`          | object               | -             | See callbacks table                                                                    |\n| `variant`            | object               | -             | See variant table                                                                      |\n| `onYearForward`      | () =\u003e void           | -             | Called when calendar browsed forward                                                   |\n| `onYearBackward`     | () =\u003e void           | -             | Called when calendar browsed backward                                                  |\n| `quickSelectors`     | Object[]             | -             | See quickselectors table                                                               |\n| `showQuickSelectors` | boolean              | true          | Show/Hide the quickselectors                                                           |\n\n\u003cdetails\u003e\n  \u003csummary\u003equickselectors\u003c/summary\u003e\n\n| Prop         | Type                              | Description                                  |\n| ------------ | --------------------------------- | -------------------------------------------- |\n| `label`      | string                            | Label for the button                         |\n| `startMonth` | Date                              | Date for the range start month               |\n| `endMonth`   | Date                              | Date for the range end month                 |\n| `variant`    | ButtonVariant                     | variant for the button                       |\n| `onClick`    | (selector: QuickSelector) =\u003e void | Called when quick selection has been clicked |\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003ecallbacks\u003c/summary\u003e\n\n| Prop         | Type                     | Description                       |\n| ------------ | ------------------------ | --------------------------------- |\n| `yearLabel`  | (year: number) =\u003e string | Used for styling the Year Label   |\n| `monthLabel` | (month: Month)           | Used for styling the Month Labels |\n\n```typescript\ntype Month = { number: number; name: string; yearOffset: number }; // yearOffset = 0 on the left calendar and 1 on the right side calendar\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003evariant\u003c/summary\u003e\n\n| Prop       | Type                                             | Description                                                                             |\n| ---------- | ------------------------------------------------ | --------------------------------------------------------------------------------------- |\n| `calendar` | {`main: ButtonVariant, selected: ButtonVariant`} | Styling for the Month-buttons. `main` for non-selected \u0026 `selected` for selected Button |\n| `chevrons` | ButtonVariant                                    | Styling for the backward- \u0026 forward-chevron buttons                                     |\n\n```typescript\ntype ButtonVariant = \"default\" | \"outline\" | \"ghost\" | \"link\" | \"destructive\" | \"secondary\" | null | undefined;\n```\n\n\u003c/details\u003e\n\n## Example with shadcn `form` component\n\nYou can use Monthpicker and Monthrangepicker with [shadcn forms](https://ui.shadcn.com/docs/components/form).\nA Form schema could look like this:\n\n```typescript\nconst FormSchema = z.object({\n    month: z.date(),\n    monthrange: z.object({\n        start: z.date(),\n        end: z.date(),\n    }),\n});\n```\n\nYou can check out a full form example [here](https://github.com/gr3enk/shadcn-ui-monthpicker/blob/main/src/FormExample.tsx)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgr3enk%2Fshadcn-ui-monthpicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgr3enk%2Fshadcn-ui-monthpicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgr3enk%2Fshadcn-ui-monthpicker/lists"}