Content
View differences
Updated by Henriette Darge about 4 years ago
The date selection in the date picker shall become more intuitive.
**Acceptance criteria**
**Date fields**
* When the date picker is opened, a field is always in focus by default.
* When opened by clicking the "start date" field, the start date will be in focus by default.
* When opened by clicking the "finish date" field, the finish date will be in focus by default.
* When all fields are cleared, and a date/day is clicked:
* That date will be considered a start date by default.
* However, if the user then clicks on a second date prior to that initially selected date, that second date will now be considered the start date, and the initial one the finish date.
* The user is able to input dates either:
* by clicking on the dates on the mini-calendar (in the date picker modal)
* by inputting the dates manually in the text fields for start date and finish date in ISO format.
* Selecting a start date by clicking on a date or by inputting and pressing tab will move the focus to the finish date.
* The focus on the field also determines what is selected when the user clicks on a day in the calendar (i.e, clicking on the the start date field and then clicking on a date sets that date to the start date).
* The visual format for displaying dates depends on the locale settings.
* When in focus, the date text field should convert the date into an ISO format ("2022-03-31"). The user can then manually modify the date or enter a new date in this format.
* On blur (focus removed), the display goes back to a more readable format (depending on locale, eg. "Thu 31.03.2022")
**Calendar**
* Two months are displayed (current and next month)
* Clicking on backwards/forwards advances the calendar by a single month
* Typing a ISO-standard date will select that date automatically in the calendar.
* Hovering on any date _**after**_ that initially selected date:
* will give a "preview" of the end date (as in, all dates between the selected start date and this second date will be highlighted on hover).
* Clicking on a date will then set that as the finish date.
* Hovering on any date _before_ that initially selected date:
* will also give a "preview" of the period selected, but in considering that first date as the finish date.
* Clicking on a date will then set that second date as start date, and the initially selected date as the finish date.
**Acceptance criteria**
**Date fields**
* When the date picker is opened, a field is always in focus by default.
* When opened by clicking the "start date" field, the start date will be in focus by default.
* When opened by clicking the "finish date" field, the finish date will be in focus by default.
* When all fields are cleared, and a date/day is clicked:
* That date will be considered a start date by default.
* However, if the user then clicks on a second date prior to that initially selected date, that second date will now be considered the start date, and the initial one the finish date.
* The user is able to input dates either:
* by clicking on the dates on the mini-calendar (in the date picker modal)
* by inputting the dates manually in the text fields for start date and finish date in ISO format.
* Selecting a start date by clicking on a date or by inputting and pressing tab will move the focus to the finish date.
* The focus on the field also determines what is selected when the user clicks on a day in the calendar (i.e, clicking on the the start date field and then clicking on a date sets that date to the start date).
* The visual format for displaying dates depends on the locale settings.
* When in focus, the date text field should convert the date into an ISO format ("2022-03-31"). The user can then manually modify the date or enter a new date in this format.
* On blur (focus removed), the display goes back to a more readable format (depending on locale, eg. "Thu 31.03.2022")
**Calendar**
* Two months are displayed (current and next month)
* Clicking on backwards/forwards advances the calendar by a single month
* Typing a ISO-standard date will select that date automatically in the calendar.
* Hovering on any date _**after**_ that initially selected date:
* will give a "preview" of the end date (as in, all dates between the selected start date and this second date will be highlighted on hover).
* Clicking on a date will then set that as the finish date.
* Hovering on any date _before_ that initially selected date:
* will also give a "preview" of the period selected, but in considering that first date as the finish date.
* Clicking on a date will then set that second date as start date, and the initially selected date as the finish date.