I have a chart tool (desktop application) where I need to put a date/time range option, but I'm not sure the best way to fit it inside my current design (using google material design). Here is a mockup from my current idea, but is using too much space, any better idea?
(The Inception/Latest checkboxes disables the corresponding date/time pickers)
Mockup:
Current screen (sorry, is missing the From/To labels):
Perhaps relocate some elements?
I'd have first/last be default settings; i.e. you get the entire range. If someone doesn't want the full range, they press the calendar and enter their own start and/or end date in a popup. I'd put the first/last button in that popup.
If people want to use the full range, they don't need to turn it on. If they don't want the full range, they'll click the calender just like they do now. The only case where you need a button to set the range to its limits is when a user has manually changed it; and if they have manually changed it, they've seen the popup and thus seen the 'reset' button.
This should free up plenty of space tp include the 'From' and 'To' labels.
Always consider if/what default settings make sense, when/why people deviate, and when/how such options should be presented/accessible.
Can you save the user some time/effort by giving them a pre-rolled list of possible options for time/date ranges, and end that list with a "Custom Range" option?
The exact pre-set ranges would be specific to your product needs, of course... perhaps "Since inception" is one option. If they choose Custom Range, that is when you give them the more robust picker.
