I was tasked to design a date range picker in the style of a project that I am currently working on. Ludwig's work was a huge inspiration in designing this.
WOW looks amazing, just got one thing, the today looks like you tried to make a "pressed in" effect right? on the bottom of the box its look great but the top and sides don't look that pressed. but thats my eyes, in comparison with yours they are shit :P
In my opinion, the selected state 1. is too heavily emphasized and 2. is shifted to the left on the second calendar. I don't think the little highlight on the bottom edge is doing you any favors, nix that mug. Other than that, I've never seen a cleaner datepicker in my life. I had to work with some nasty datepickers for Enterprise Rent-A-Car and it is quite a hefty challenge (think about it: selecting dates for a car rental is a very important task).
Chris, GREAT feedback brother. So, I should just nix that inset edge and de-empasize, lighten or lower the contrast on that selected state? Sound advice fo sho. Let me know if you see any other things that you could see improved.
I agree with what Chris said on the bottom edge highlight for selected dates. That's some nitty gritty detail he's seeing, I love it!
The hover appearing button for August with the down arrow to select a different month is nice, but it seems to come out of nowhere. October has no hint of rolloverness or anything aside from the down arrow. I'm a little concerned that what with the over arrows and everything else that has to be happening here that the down arrow will get lost and you'll lose your cue to the drop down. I'm not sure if it'd work, but maybe a faint button look that is emphasized on rollover like you have it?
synchronicity! I'm building a jquery datepicker using filament group's date range picker as the foundation. It's a total nightmare to re-style, but this is inspiring me.
Rogie - I've had a date range picker usability tested. One thing that came out as important is a deactivated state for dates - dates you can't select.
That is, for most applications, you cannot usually select dates in the past. Nor can you select dates in the second calendar that are previous to the date selected in the first calendar. Either way, you're going to need another "state" for the numbers.
Maybe you could add another state for dates that are currently selected (i.e. all dates between the one in the first calendar and the one it the second)?
Working on a date picker for a UI. I took inspiration from @Rogie 2 month Date picker as it is awesome and changed up some things and removed some features.
One of the features I added was the clear selection feature, and I'm not really happy with where it is so any suggestions would be helpful (also tried it next to the selected date at the top, but didn't like it next to the DONE button).
23 Responses
Pro
Rogie
I was tasked to design a date range picker in the style of a project that I am currently working on. Ludwig's work was a huge inspiration in designing this.
almost 2 years ago
Pro
Simon Raczka
spiffy!
almost 2 years ago
Pro
Thibaut Ninove
That's a style I like Rogie.
almost 2 years ago
Pro
Josh King
nice brohan
almost 2 years ago
OMG! That makes me shiver! Nice work bro!
almost 2 years ago
Great!
almost 2 years ago
Pro
Rogie
Ooooh, shivers Jeff, nice! thanks for all the other nice comments. I digs it too!
almost 2 years ago
Pro
Lennart Ziburski
When sawing the thumbnail, I thought the shot actually is from Ludwig. Other than that, it looks great. ;)
Although I'm not sure if it's clear that I have to pick a range when not reading the title.
almost 2 years ago
Pure graphic sex.
almost 2 years ago
WOW looks amazing, just got one thing, the today looks like you tried to make a "pressed in" effect right? on the bottom of the box its look great but the top and sides don't look that pressed. but thats my eyes, in comparison with yours they are shit :P
almost 2 years ago
In my opinion, the selected state 1. is too heavily emphasized and 2. is shifted to the left on the second calendar. I don't think the little highlight on the bottom edge is doing you any favors, nix that mug. Other than that, I've never seen a cleaner datepicker in my life. I had to work with some nasty datepickers for Enterprise Rent-A-Car and it is quite a hefty challenge (think about it: selecting dates for a car rental is a very important task).
almost 2 years ago
Pro
Rogie
Chris, GREAT feedback brother. So, I should just nix that inset edge and de-empasize, lighten or lower the contrast on that selected state? Sound advice fo sho. Let me know if you see any other things that you could see improved.
almost 2 years ago
Pro
Philip Renich
I agree with what Chris said on the bottom edge highlight for selected dates. That's some nitty gritty detail he's seeing, I love it!
The hover appearing button for August with the down arrow to select a different month is nice, but it seems to come out of nowhere. October has no hint of rolloverness or anything aside from the down arrow. I'm a little concerned that what with the over arrows and everything else that has to be happening here that the down arrow will get lost and you'll lose your cue to the drop down. I'm not sure if it'd work, but maybe a faint button look that is emphasized on rollover like you have it?
almost 2 years ago
Pro
Nick Toye
Love stuff like this. I need to have an excuse to do one of these calendars.
almost 2 years ago
synchronicity! I'm building a jquery datepicker using filament group's date range picker as the foundation. It's a total nightmare to re-style, but this is inspiring me.
Rogie - I've had a date range picker usability tested. One thing that came out as important is a deactivated state for dates - dates you can't select.
That is, for most applications, you cannot usually select dates in the past. Nor can you select dates in the second calendar that are previous to the date selected in the first calendar. Either way, you're going to need another "state" for the numbers.
almost 2 years ago
Nice work. Always hate designing them in Photoshop. ;-)
almost 2 years ago
Pro
Jerett Patterson
I am actually cleaning up my drool off my keyboard. And yes - it is drool .... I think.
almost 2 years ago
Pro
Marcelo Marfil
Awesome! Great work Rogie
almost 2 years ago
Pro
Sacha Greif
Maybe you could add another state for dates that are currently selected (i.e. all dates between the one in the first calendar and the one it the second)?
almost 2 years ago
Fancy!
almost 2 years ago
@Sacha
And if you figure out how to do it, let me know!
almost 2 years ago
Pro
Jesse Mainee
Now that's sexy!
over 1 year ago
Rebound
Date Picker (2 Month View)
by Warwick Kay
Working on a date picker for a UI. I took inspiration from @Rogie 2 month Date picker as it is awesome and changed up some things and removed some features.
One of the features I added was the clear selection feature, and I'm not really happy with where it is so any suggestions would be helpful (also tried it next to the selected date at the top, but didn't like it next to the DONE button).
5 months ago