Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/johnpolacek/date-range-picker-for-shadcn
DateRangePicker is a reusable component for shadcn using Radix UI and Tailwind CSS. Includes preset date ranges, text entry, calendar selection and date comparison
https://github.com/johnpolacek/date-range-picker-for-shadcn
datepicker shadcn shadcn-ui tailwind tailwind-css
Last synced: 2 days ago
JSON representation
DateRangePicker is a reusable component for shadcn using Radix UI and Tailwind CSS. Includes preset date ranges, text entry, calendar selection and date comparison
- Host: GitHub
- URL: https://github.com/johnpolacek/date-range-picker-for-shadcn
- Owner: johnpolacek
- License: mit
- Created: 2023-07-19T14:08:48.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-13T14:32:08.000Z (8 months ago)
- Last Synced: 2024-12-04T04:02:12.295Z (9 days ago)
- Topics: datepicker, shadcn, shadcn-ui, tailwind, tailwind-css
- Language: TypeScript
- Homepage: https://date-range-picker-for-shadcn-demo.vercel.app/
- Size: 263 KB
- Stars: 739
- Watchers: 5
- Forks: 28
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-shadcn-ui - date-range-picker-for-shadcn - Includes multi-month views, text entry, preset ranges, responsive design and date range comparisons. (Libraries and components:)
- awesome-shadcn-ui - date-range-picker-for-shadcn - Includes multi-month views, text entry, preset ranges, responsive design and date range comparisons. (Libraries and components:)
- awesome-shadcn-ui - date-range-picker-for-shadcn - Includes multi-month views, text entry, preset ranges, responsive design, and date range comparisons. (Libs and Components)
- awesome-shadcn-ui - Date Range Picker - DateRangePicker includes preset date ranges, text entry, calendar selection and date comparison. (Components)
- awesome-shadcn-ui - Date Range Picker - DateRangePicker includes preset date ranges, text entry, calendar selection and date comparison. (Components)
README
# `DateRangePicker` Component
`DateRangePicker` is a reusable component built for [Shadcn](https://ui.shadcn.com/) using beautifully designed components from [Radix UI](https://www.radix-ui.com/) and [Tailwind CSS](https://tailwindcss.com/). It provides a dropdown interface to allow users to select or enter a range of dates and includes additional options such as preset date ranges and an optional date comparison feature.
[View the Demo](https://date-range-picker-for-shadcn-demo.vercel.app/)
## Installation
The `DateRangePicker` depends on the following components from shadcn:
- [Button](https://ui.shadcn.com/docs/components/button)
- [Calendar](https://ui.shadcn.com/docs/components/calendar)
- [Label](https://ui.shadcn.com/docs/components/label)
- [Popover](https://ui.shadcn.com/docs/components/popover)
- [Switch](https://ui.shadcn.com/docs/components/switch)
If you are using the CLI for installation, you can do this:
```
npx shadcn-ui@latest add button calendar label popover switch
```
The DateRangePicker uses [icons from Radix UI](https://icons.radix-ui.com/) so you will need to install that or update the component to use a different library.
```
npm install @radix-ui/react-icons
```
Next, copy and paste the code from the `/src` directory for [`DateInput`](https://github.com/johnpolacek/date-range-picker-for-shadcn/blob/main/src/date-input.tsx) and [`DateRangePicker`](https://github.com/johnpolacek/date-range-picker-for-shadcn/blob/main/src/date-range-picker.tsx) into your project and customize to your needs. The code is yours.
## Props
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `onUpdate` | function | - | Callback function that is called when the date range is updated. The function receives an object containing the selected date range and, if the compare feature is enabled, the compare date range. |
| `initialDateFrom` | Date or string | Today’s Date | The initial start date for the main date range. |
| `initialDateTo` | Date or string | - | The initial end date for the main date range. |
| `initialCompareFrom` | Date or string | - | The initial start date for the compare date range. |
| `initialCompareTo` | Date or string | - | The initial end date for the compare date range. |
| `align` | string | `'end'` | The alignment of the dropdown popover. Options are `'start'`, `'center'`, or `'end'`. |
| `locale` | string | `'en-US'` | The locale used for date formatting. |
| `showCompare` | boolean | `true` | Whether to show the compare date range feature. |
## Example
```jsx
console.log(values)}
initialDateFrom="2023-01-01"
initialDateTo="2023-12-31"
align="start"
locale="en-GB"
showCompare={false}
/>
```
This example creates a `DateRangePicker` component with an initial date range from January 1, 2023 to December 31, 2023. The dropdown popover is aligned to the start of the trigger button, the dates are formatted according to the 'en-GB' locale, and the compare feature is hidden. The `onUpdate` function logs the selected date range to the console.