Content
View differences
Updated by Henriette Darge about 4 years ago
The date selection in the date picker shall become more intuitive.
**Acceptance criteria**
**Rules for date selection (for 12.2, needs discussion)**
* When the date picker is opened, by default, start date is in focus (unless you click on finish date).
* If no date has been input, the field that is focused takes the date that is clicked on.
* If one date has been input (eg. start date), the focus changes to the other date (eg. finish date). Clicking on two dates in this order would then select the start and finish dates.
* Unless the second date is earlier than start date, in which case, the dates inverse.
* If two dates (start _and_ finish dates) are already input, there are three cases:
* If you click a date that is before the start date, this modifies the start date (independent of focus).
* If you click a date in between the start and finish dates, the field that takes this date depends on the focus.
* If you a click a date that is after the finish date, this depends on the focus:
* If start date is focused, then the selected date becomes the new start date, and the finish date is cleared (and now in focus).
* If the finish date is focused, the new date is taken, start date is maintaned.
* If you click on the same date twice, it becomes the start _and_ the finish date.
**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 is 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**
**Rules for date selection (for 12.2, needs discussion)**
* When the date picker is opened, by default, start date is in focus (unless you click on finish date).
* If no date has been input, the field that is focused takes the date that is clicked on.
* If one date has been input (eg. start date), the focus changes to the other date (eg. finish date). Clicking on two dates in this order would then select the start and finish dates.
* Unless the second date is earlier than start date, in which case, the dates inverse.
* If two dates (start _and_ finish dates) are already input, there are three cases:
* If you click a date that is before the start date, this modifies the start date (independent of focus).
* If you click a date in between the start and finish dates, the field that takes this date depends on the focus.
* If you a click a date that is after the finish date, this depends on the focus:
* If start date is focused, then the selected date becomes the new start date, and the finish date is cleared (and now in focus).
* If the finish date is focused, the new date is taken, start date is maintaned.
* If you click on the same date twice, it becomes the start _and_ the finish date.
**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.
*
* 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.
*
* 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 is
* When
* 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
* Clicking on a date will then set that second date as start date, and the initially selected