Content
View differences
Updated by Jens Ulferts about 1 year ago
## Context
This will be worked on in parallel with ##59845.
## Acceptance criteria
**Work package date picker**
Modify the current work package:
* There are now two different date selection modes available:
* single-date, where the work package has only a finish date or a start date
* range, where the work package has both dates and a duration
* By default, new work packages will start in single-date mode with only the Finish date available
* This behaviour is different if the setting "Use current date as start date for new work packages" is active. In this case, the start date will always be set and that date will be the active one (in single-date mode).
* If a work package has both start and finish dates, it will open in range mode as it does today.
* In range mode, the date picker behaves exactly as it does today, as described in ##59845
* If a work package has only one date, whether it be start or finish, it will open in single date mode:
* The other date field is replaced with a button with the same height and width as the input would with a + trailing icon and the appropriate label ("Start date" or "Finish date")
* The Duration field will be available but empty.
* Clicking on the add date button will switch the date picker into range mode: it will replace the button with the appropriate input field and switch focus to it
* Entering a duration will automatically switch from single to range mode, since the start date can now be derived
* _\[open\] On blur? Whenever the input is taken into account._
* In single date mode, in the Flatpickr mini-calendar below, the selected date will be curved in all sides (vs. on only one end when in range mode)
* A clear trailing action (X icon) is always visible when either the Start or Finish date fields is available
* _Note: Ideally, we would only show the clear button on focus and only when there is a value; however, Primer might not allow this behaviour out of the box_
* The clear action clears the value but does not change the mode until save; the date picker remains in single date or range mode.
* When a date picker is saved in range mode, it will open in single-date mode if one or both dates were cleared.
* If one date is cleared and the date picker is saved, it will go into single date mode with the _other_ date field active (the one with the value).
* If both dates are cleared and the date picker is saved, it will go into single-date mode with the Finish date active.
* _\[open\] If a work package is in single date mode, but the user clicks on the other field (in a work package table, for example), it will not make that field active; instead, the date picker will display with the existing date in focus. The user has to consciously add that second date to be able to input a range._
* _This can be challenged; we can also assume that if the user actively clicks on an empty date field, it means they want to entert a value._
**Work package list**
* In a work package table, clicking specifically on Start date, Finish date or Duration will display the date picker with that field in focus
* _\[open\] However, if a work package is in single date mode, but the user clicks on the other field (in a work package table, for example), it will not make that field active; instead, the date picker will display with the existing date in focus. The user has to consciously add that second date to be able to input a range._
* _This can be challenged; we can also assume that if the user actively clicks on an empty date field, it means they want to enter a value._
**Mobile**
* See [mobile mockups](https://www.figma.com/design/HrWVktq0SsGI2dqqIKQ11M/Scheduling---Lag-and-Modes?node-id=1615-35043&t=HsIZLajdakP59XUj-4).
* No additional mobile-centric behaviour in addition to what is specified in ##61051
## Visuals
**Finish date-only work package date picker:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:520px;" src="/api/v3/attachments/301103/content">
**A start date-only date picker is possible too (here, with a banner):**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:520px;" src="/api/v3/attachments/301104/content">
### Mockup
Figma link: [https://www.figma.com/design/HrWVktq0SsGI2dqqIKQ11M/Scheduling---Lag-and-Modes?node-id=1547-8988](https://www.figma.com/design/HrWVktq0SsGI2dqqIKQ11M/Scheduling---Lag-and-Modes?node-id=1547-8988)
### Out of scope
* Changing default behaviour in the admin settings
* ~~Single date selection in range mode (something like:~~ [~~https://flatpickr.js.org/plugins/#rangeplugin-beta)~~](https://flatpickr.js.org/plugins/#rangeplugin-beta)~~/). This is when, even in range mode, a click on the calendar sheet will affect only the actively selected date:~~
* ~~Selecting a range by simple clicking two dates will not be possible.~~
* ~~Range preview on highlight will not be possible.~~
* ~~Flipping start/finish to allow users to click-select ranges regardless of the order of the clicks (start first and then finish or vice-versa) will not be possible.~~
* ~~This is out of scope because the above plugin only supports this behaviour for basic date pickers attached to outside date inputs and not inside a modal like in our date picker. It might still be possible (effort unknown, but in all likely hood substanstial) in a hacky way but the result is likely to be unsatisfactory and error-prone compared to the above-proposed button solution.~~ _~~(@Oliver Günther: could you confirm this is accurate?)~~_
This will be worked on in parallel with ##59845.
## Acceptance criteria
**Work package date picker**
Modify the current work package:
* There are now two different date selection modes available:
* single-date, where the work package has only a finish date or a start date
* range, where the work package has both dates and a duration
* By default, new work packages will start in single-date mode with only the Finish date available
* This behaviour is different if the setting "Use current date as start date for new work packages" is active. In this case, the start date will always be set and that date will be the active one (in single-date mode).
* In range mode, the date picker behaves exactly as it does today, as described in ##59845
* If a work package has only one date, whether it be start or finish, it will open in single date mode:
* The other date field is replaced with a button with the same height and width as the input would with a + trailing icon and the appropriate label ("Start date" or "Finish date")
* The Duration field will be available but empty.
* Clicking on the add date button will switch the date picker into range mode: it will replace the button with the appropriate input field and switch focus to it
* Entering a duration will automatically switch from single to range mode, since the start date can now be derived
* _\[open\] On blur? Whenever the input is taken into account._
* In single date mode, in the Flatpickr mini-calendar below, the selected date will be curved in all sides (vs. on only one end when in range mode)
* A clear trailing action (X icon) is always visible when either the Start or Finish date fields is available
* _Note: Ideally, we would only show the clear button on focus and only when there is a value; however, Primer might not allow this behaviour out of the box_
* The clear action clears the value but does not change the mode until save; the date picker remains in single date or range mode.
* When a date picker is saved in range mode, it will open in single-date mode if one or both dates were cleared.
* If one date is cleared and the date picker is saved, it will go into single date mode with the _other_ date field active (the one with the value).
* If both dates are cleared and the date picker is saved, it will go into single-date mode with the Finish date active.
* _\[open\] If a work package is in single date mode, but the user clicks on the other field (in a work package table, for example), it will not make that field active; instead, the date picker will display with the existing date in focus. The user has to consciously add that second date to be able to input a range._
* _This can be challenged; we can also assume that if the user actively clicks on an empty date field, it means they want to entert a value._
**Work package list**
* In a work package table, clicking specifically on Start date, Finish date or Duration will display the date picker with that field in focus
* _\[open\] However, if a work package is in single date mode, but the user clicks on the other field (in a work package table, for example), it will not make that field active; instead, the date picker will display with the existing date in focus. The user has to consciously add that second date to be able to input a range._
* _This can be challenged; we can also assume that if the user actively clicks on an empty date field, it means they want to enter a value._
**Mobile**
* See [mobile mockups](https://www.figma.com/design/HrWVktq0SsGI2dqqIKQ11M/Scheduling---Lag-and-Modes?node-id=1615-35043&t=HsIZLajdakP59XUj-4).
* No additional mobile-centric behaviour in addition to what is specified in ##61051
## Visuals
**Finish date-only work package date picker:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:520px;" src="/api/v3/attachments/301103/content">
**A start date-only date picker is possible too (here, with a banner):**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:520px;" src="/api/v3/attachments/301104/content">
### Mockup
Figma link: [https://www.figma.com/design/HrWVktq0SsGI2dqqIKQ11M/Scheduling---Lag-and-Modes?node-id=1547-8988](https://www.figma.com/design/HrWVktq0SsGI2dqqIKQ11M/Scheduling---Lag-and-Modes?node-id=1547-8988)
### Out of scope
* Changing default behaviour in the admin settings
* ~~Single date selection in range mode (something like:~~ [~~https://flatpickr.js.org/plugins/#rangeplugin-beta)~~](https://flatpickr.js.org/plugins/#rangeplugin-beta)~~/). This is when, even in range mode, a click on the calendar sheet will affect only the actively selected date:~~
* ~~Selecting a range by simple clicking two dates will not be possible.~~
* ~~Range preview on highlight will not be possible.~~
* ~~Flipping start/finish to allow users to click-select ranges regardless of the order of the clicks (start first and then finish or vice-versa) will not be possible.~~
* ~~This is out of scope because the above plugin only supports this behaviour for basic date pickers attached to outside date inputs and not inside a modal like in our date picker. It might still be possible (effort unknown, but in all likely hood substanstial) in a hacky way but the result is likely to be unsatisfactory and error-prone compared to the above-proposed button solution.~~ _~~(@Oliver Günther: could you confirm this is accurate?)~~_