I think the new date range picker could do with some rough edges sanding off.
The different left/right highlights on an individual day as you hover over them are honestly pretty terrible UX: It makes the user think that the UI will do different things depending on which half of the day you click on. This isn’t actually the case (or at least, it isn’t until you have an existing selection!), so it is just super-confusing.
When the picker is blank, hovering over a day highlights half of it. Clicking then highlights the whole day, which makes me think it’s finished selecting the range already. When you move your mouse you realise this isn’t the case and that you’re now selecting a range as you might expect. But up to that point it’s all just unnecessarily weird.
Once you’re in the middle of selecting a range, if you happened to click on the right hand half of the start day, it still leaves the gradient floating there in the right hand side of the now wholly-selected start day, which looks odd if you then hover over an end day that is after the start day. Fairly minor, but poor UI polish.
Once you’ve then selected the range, if you change your mind the behaviour is rather counter-intuitive there, too. It now does matter which half of the day you click on, as that determines whether it moves the start or the end date. The click targets are half as wide as you normally are used to on date pickers, which isn’t ideal, especially on mobile, where this is almost completely unusable.
I can’t drag the start or end markers, which I certainly expect to be able to do on mobile, but probably also on desktop. If you do try to drag-select a new range from inside the existing one then you get some UI artefacts that persist even after releasing the mouse button:
To make matters worse, if you want to pick a different date range entirely, you now can’t without clicking the little “x” icon and starting all over again, because clicking anywhere outside the existing selected date range just extends it rather than starting all over again. The system now doesn’t let you click on the first half of a day after the current range to indicate you want a new range, even though that might actually justify the split-day UI in the first place.
I urge you to reconsider the behaviour on this one; personally I would avoid reinventing the wheel here and use a decent open source component instead.
You might like to take some inspiration from:
- DatePicker | Mantine
- DatePicker | Ant Design
- easepick ← this one is tiny, you could probably embed it
- Hotel Datepicker
- Litepicker