Wireframe - date picker status



hi all
we are working on a component to allow users selecting pre-defined date range and custom date range.

Here’s a first solution draft:

What do u think about them?
Did u ever worked on similar components?
If yes how you solved this user needs?

Thanks in advance for your reply


Google Analytics does this. Here are some screenshots:

It defaults to the last 30 days.

When a pre-defined range is selected, the date input fields are disabled.

Hope this helps,

  • Leon


hi @leonbarnard
THX a lot for you input.
I’ve to say it’s a good approach and it would fit well the mobile first design.

What I’m thinking now is:

  • is the connection between the dropdown and the date pickers clear enough for users?
  • in my context the default value will be “last 7 days” which placeholder is the best for the two date pickers?

Anyway I will try to design it!
THX again :slight_smile:


Happy to help! Feel free to post what you come up with here. I think seeing it will help others review it.


I will :wink: