Timespan Builder UI mockup

[alexishope]

Material UI landscape date range picker with thin grey border & aqua accent color

http://www.material-ui.com/#/components/date-picker

[rahulbot]

Three notes about this.

1) Functionality
This isn't quite right. We need this page to show a list of all the existing "custom" timespans, with an option to delete each. Then we also need to have a "add a new timespan" button - that probably opens up something like above (inline or on a new page?).

2) UI
Also, Material UI's docs are a little confusing here - it doesn't have a date range picker. It does allow you to limit a datepicker to a range. I was confused by that difference at first in their docs. So we need two date pickers. With that in mind we need to choose portrait or landscape, and inline or popup-linked-to-field.

3) Fields
Third thing - the spec doesn't allow for naming of timespans. It just has start and end dates. Do you think we should add names? If so, we have to design the TimespanPicker widget in the control bar to show the names for custom timespans (we haven't really designed how it shows custom timespans at all).

[rahulbot]

@alexishope can I get the on-paper sketch for this you showed me last week? That'd probable be enough for me to get started on.

[alexishope]

TimespanMaker.pdf

Calendar icon turns green on hover, brings up Material UI Date Picker as a popup. User can also type date manually into the box with the "/ /__" placeholder.

[rahulbot]

This hasn't bubbled up as a need in teh last 3 years - closing.