johnpolacek / date-range-picker-for-shadcn Goto Github PK

DateRangePicker is a reusable component for shadcn using Radix UI and Tailwind CSS. Includes preset date ranges, text entry, calendar selection and date comparison

Home Page: https://date-range-picker-for-shadcn-demo.vercel.app/

License: MIT License

JavaScript 8.50% TypeScript 91.50%

datepicker shadcn shadcn-ui tailwind tailwind-css

date-range-picker-for-shadcn's Introduction

`DateRangePicker` Component

DateRangePicker is a reusable component built for Shadcn using beautifully designed components from Radix UI and Tailwind CSS. 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

Installation

The DateRangePicker depends on the following components from shadcn:

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 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 and DateRangePicker 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

<DateRangePicker
  onUpdate={(values) => 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.

date-range-picker-for-shadcn's People

Stargazers

Watchers

Forkers

adeleke5140 lamdavo vuquyet8080 rajgop1 swetakhadanga oussamabng wbsdickson azizmoubsit agustinfranchetti shahidx0x guxxtavoww yasseralsaidi singh-jay josemukorivo stealth-d kliton konjakss theng sscotth

date-range-picker-for-shadcn's Issues

Event propagation issue on mobile

There's an issue when you select presets on mobile through the dropdown. The click might propagate down to the date selector, leading to the preset not being selected.
This is due to event propagation not being handled in the Radix Select primitives.

Here's a solution: shadcn-ui/ui#486 (comment)

datetime picker

Thank you for this addons! could you please consider integrating a time picker feature.

Improvement suggestions

Thanks for this work so far. Shadcn has a very limited datepicker.
I'm going to throw here a great calendar in vanilla JS, which can be used as inspiration in the further development of your project.

https://easepick.com/configurator/

April dates on one line

April days are not going to new line.

Click interactions for selecting From and To dates wrong?

Not sure, but it feels like this component is acting up, at least on our end.

To me, the expected behaviour is that any time I open the date range picker, the first click would always set the "From" date, and the second click would always set the "To" date. Currently, it feels like the picker doesn't always allow you to set the "From" date first, but actualy just updates the "To" date?

How to work on local environment?

I wanted to help fix a bug I noticed on mobile for your website and then proceeded to fork the repo.
Sadly I wasn't able to run the project locally and inspecting package.json doesn't seem to include any npm script.

Could you give me some pointers?

Today and Yesterday Pre selects not working,

Hi firstly let me say, amazing component, i love it.

I noticed in Console.logs

<DateRangePicker onUpdate={(values) => { const { range } = values; console.log( Selected Date Range: From ${range.from.toISOString()} to ${range.to?.toISOString()});

Selected Date Range: From 2024-04-01T23:00:00.000Z to 2024-04-01T23:00:00.000Z

This is what i get back when i select, Today,

Selected Date Range: From 2024-03-31T23:00:00.000Z to 2024-03-31T23:00:00.000Z

This is what i get back when i select Yesterday,

Selected Date Range: From 2024-03-31T00:00:00.000Z to 2024-04-01T23:00:00.000Z

This is what i get back when i select Last week.

Everything works expect Today & Yesterday, the Console.logs shows a specific moment for Today & Yesterday rather then capturing the entire day

Date "to" time

The date picker "to" range starts at 0.0.0.0 on the date selected, therefore it misses transactions for that date I think. The presets for today, 7 days etc; are all set to to.setHours(23, 59, 59, 999) but if I change the "to" item to this value in the component it does not appear to work.