Create DateRangePicker component

[hoorayimhelping]

Creates a DateRangePicker component which allows us to, you guessed it, pick date ranges.

• One required property: onSelectDateRange which is a callback function that is called when the date range is selected (i.e. after the end date has been selected). The callback has two arguments, startDate and endDate, both of type Date.
• Allows prefilling startDate and/or endDate so that they're automatically selected when the DateRangePicker is rendered
• Allows disabled future dates, same as the regular DatePicker
• Allows overriding the default placeholder of start date - end date

Video:

1.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
click-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 15, 2025 3:18pm

[hoorayimhelping]

@crisalbu I have a rough draft of the DateRangePicker up here. It's missing some of the functionality like the range showing in the date input, but I wanted to get it out in front of you so I could get your feedback on some of the interactions that aren't described in the designs:

• When should the calendar dropdown close?
• How do we handle clicking a date, and then selecting a date in the past (I click the 14th, as the start date, then I click the 8th)? I currently have it so that the earlier date becomes the start date and the later date becomes the end date.
• How do we reset a date range? Say I've chosen the range 8 - 14, but now I want to select 18 - 25. I think right now you'd have to click 18, to make the range 14-18, then you'd have to click 25 to make it 18-25.

[crisalbu]

Excited to see that you're working on this! ❤️

• When should the calendar dropdown close?

When a date is selected, or when you click outside the calendar

• How do we handle clicking a date, and then selecting a date in the past (I click the 14th, as the start date, then I click the 8th)? I currently have it so that the earlier date becomes the start date and the later date becomes the end date.

We should only change the start date and still ask users to select the end date. It's the general behaviour when using other date pickers.

• How do we reset a date range? Say I've chosen the range 8 - 14, but now I want to select 18 - 25. I think right now you'd have to click 18, to make the range 14-18, then you'd have to click 25 to make it 18-25.

Yes, you'd have to click the start date or the end date.

Let's also add placeholders for clarity, see designs below:

[hoorayimhelping]

@crisalbu I think I've implemented all the designs and your feedback. You can see an example here. Let me know what you think.

One thing to note: when a start date is selected but an end date isn't, the designs have end date in the same color as the placeholder. That currently isn't possible without changing some deeper code. If that's a hard requirement, let me know and I can get to work on that. Instead, the input text is all the same default color.

[crisalbu]

Hey @hoorayimhelping , unfortunately I cannot pick a date, is that expected?

If that's a hard requirement, let me know and I can get to work on that. Instead, the input text is all the same default color.

It needs to be different colours, I'm afraid, to signal/emphasise where a the date has already been selected and where not.

[hoorayimhelping]

Hey @hoorayimhelping , unfortunately I cannot pick a date, is that expected?

@crisalbu no, that's not expected. I just tested it in Chrome and I can't pick one either. Very odd, it works fine in Firefox. I'll figure this one out.

It needs to be different colours, I'm afraid, to signal/emphasise where a the date has already been selected and where not.

Okay. This is something that will block the DateRangePicker from being shipped until I can figure out a workaround.

[hoorayimhelping]

@crisalbu It's working in Chrome again, and the placeholder text should now be the proper color when a start date is selected and an end date isn't. Let me know if there are any other changes that need to happen.

Preview here: https://click-ui-git-bucky-datetimepicker-clickhouse.vercel.app/?path=/docs/display-daterangepicker--docs

[crisalbu]

Thanks @hoorayimhelping , I was able to test.

I also uncovered a small bug. Currently, you can't seem to select a new interval, once one was selected, see video below:

Expected behaviour:

• clicking 6 should reset the interval and should populate the start date with that value.

[hoorayimhelping]

@crisalbu I thought that was the intended behavior we wanted based on your earlier comment, but I can see how I'd interpret it differently now.

Before I change this, I figured I'd make the case for why it's this way: You can still reset the interval if you click the start date after clearing the end date.

I personally prefer the way it is now, because it allows you to change the end date without resetting the whole date range. This is nice in the case of accidentally clicking the wrong date, or in the case where you want to change the end date and your start date is in a different month. It saves having to click back through to the appropriate month and selecting the start date again. I find resetting the whole range after clicking on either date a bit annoying when using date pickers in the wild.

But if you feel strongly that clicking either the start date or the end date should reset the whole range, I can do that.

[crisalbu]

You can still reset the interval if you click the start date after clearing the end date.

But how do I clear the date? I wasn’t able to do that. The UI only allowed me to select a new end date, never a new start date.

In most tools (like Datadog, Booking, or Google Flights), the behavior is as follows:

• The user selects a start and end date.
• If they click another date after that, it resets the interval, using that date as the new start, and prompts for a new end date.

If we don’t follow that (which, to me, is familiar and expected behavior), we should at least:

• Let users click the start date again so they can change it.
• Allow users to use the Del key to clear one or both fields.

[hoorayimhelping]

But how do I clear the date? I wasn’t able to do that. The UI only allowed me to select a new end date, never a new start date.

Click end date, then click start date.

1.mov

Alternatively, click start date, then end date:

1.mov

Allow users to use the Del key to clear one or both fields.

cool, I can do that, regardless of what we decide to go with

[crisalbu]

But how do I clear the date? I wasn’t able to do that. The UI only allowed me to select a new end date, never a new start date.

Click end date, then click start date.
Alternatively, click start date, then end date:

I'm afraid that's not a common pattern and many users won't realize that's how it's done. I'd prefer it if we reset the date on click.

If we want to make the date picker more complex, we can let users click the start/end date in the in the field (not the drop-down calendar) which would let users select a new start/end date. Hope that makes sense, if not, let's jump on a call :)

[hoorayimhelping]

@crisalbu all previous issues you've brought up have been resolved.

Latest build for testing: https://click-12z4pwk0z-clickhouse.vercel.app/?path=/docs/display-daterangepicker--docs

[crisalbu]

This is awesome, thanks @hoorayimhelping ❤️

In a future addition, it would be nice if we could let users delete the start or end date when pressing it in the text field.

[hoorayimhelping]

In a future addition, it would be nice if we could let users delete the start or end date when pressing it in the text field.

That shouldn't take too long to add in

Nevermind. It's actually quite difficult with Radix.