Today we have many different styles for the date picker:
- In the Background Tasks page
- In the Rules page
- In the Issues page
- In the Issues tab of a project
- In Administration > Projects > Background tasks
Moreover this component has some flaws
- The predefined time ranges take a lot of space in the facets and are not very noticeable
- When opening the selector, then navigating to another page, the calendar picker remains visible, floating in the middle of nowhere.
The date picker in its default state looks like a single input field with a calendar icon.
Clicking on one of the numbers of the calendar will select it as the start date. End date will be automatically selected. "Apply" button remains disabled until a valid range is defined. Numbers prior to the selected start date will turn grey and be impossible to select as an End date.
If the user has selected one of the predefined ranges on the right, it will immediately close the widget and fill the input field with the corresponding dates. Clicking on the input field again will show the widget with the predefined range highlighted.
The widget is much simpler, no predefined ranges and no "Apply" button. As soon as the user clicks on a number of the calendar, the widget closes and the input field is filled with the corresponding date.
See Date pickers section ( https://xtranet.sonarsource.com/display/PLAT/b.+Components#b.Components-Datepickers ) in our design guidelines