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
* 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 of 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 An 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 entert 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
* 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
* 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
* _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
**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?)~~_