Content
View differences
Updated by Parimal Satyal over 1 year ago
## Context
**Work in progress, specs are being writen** Not all work packages require a start _and_ a finish date. Often, only a finish date is necessary.
This feature will allow the work package date picker to go into single-date mode when only one date is input.
## Acceptance criteria
**Work package date picker**
Modify the current work package date picker:
* Resize the three fields (start date, finish date and duration) so they are all the same width.
* New work packages will open in range mode, with all three fields being available.
* If a work package has both start and finish dates, it will open in range mode as it does today.
* Clicking on the date field opens the date picker with all three fields (start date, finish date, duration) visible, enabled and editable.
* It will behave as it does today (no change).
* The 'x' icon will continue to clear the value of the active field whilst keeping focus on it.
* If a work package has only one date, whether it be start of finish, it will open in single date mode:
* The other field and the duration fields are replaced by buttons (of the same width as the fields) with a centered + (add) icon.
* Clicking on the + (add) button converts the button into a field, and make it active. The date picker now goes into range mode.
* If a date is added, the duration buttons is also automatically turned into a field. _\[**Open**: immediately or on blur after a value is input?\]_
* If a duration is added, the _other_ date field is also automatically turned into a field. _\[**Open**: immediately or on blur after a value is input?\]_
* A range date picker will remain in range mode until it is closed by clicking on the _Save_ button:
* If only a single date is entered in range mode, the date picker will go into single date mode on next opening.
* If two dates are entered in range mode, the date picker will remain in range mode on next opening.
**Work package list**
* When clicking on the value of a start or finish column, the date picker opens with that field active:
* If that field does not exist, it will open with the equivalent of the "Add" button clicked, ie. focus on an empty field.
## Visuals
**Finish date-only work package date picker:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:596px;" src="/api/v3/attachments/55831/content">
**Click on the add button under the sart date to add it:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:596px;" src="/api/v3/attachments/55832/content">
**When both dates are present, the date picker goes into its usual range mode:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:596px;" src="/api/v3/attachments/55833/content">
**In range mode, clicking on a second date will complete the range (as it does today):**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:596px;" src="/api/v3/attachments/55836/content">
**Clearing a field with the X icon will clear the field but stay in range mode:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:596px;" src="/api/v3/attachments/55839/content">
**A start date-only date picker is possible too:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:596px;" src="/api/v3/attachments/55834/content">
### Mockup
Figma link: [https://www.figma.com/file/amVGcHqRQyR8x4EsqV9H99/Date-picker?node-id=261-26140](https://www.figma.com/file/amVGcHqRQyR8x4EsqV9H99/Date-picker?node-id=261-26140)
### Out of scope
* 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. _(<mention class="mention" data-id="9177" data-type="user" data-text="@Oliver Günther">@Oliver Günther</mention>: could you confirm this is accurate?)_
* Changing default behaviour in the admin settings
**Work in progress, specs are being writen**
This feature will allow the work package date picker to go into single-date mode when only one date is input.
## Acceptance criteria
**Work package date picker**
Modify the current work package date picker:
* Resize the three fields (start date, finish date and duration) so they are all the same width.
* New work packages will open in range mode, with all three fields being available.
* If a work package has both start and finish dates, it will open in range mode as it does today.
* Clicking on the date field opens the date picker with all three fields (start date, finish date, duration) visible, enabled and editable.
* It will behave as it does today (no change).
* The 'x' icon will continue to clear the value of the active field whilst keeping focus on it.
* If a work package has only one date, whether it be start of finish, it will open in single date mode:
* The other field and the duration fields are replaced by buttons (of the same width as the fields) with a centered + (add) icon.
* Clicking on the + (add) button converts the button into a field, and make it active. The date picker now goes into range mode.
* If a date is added, the duration buttons is also automatically turned into a field. _\[**Open**: immediately or on blur after a value is input?\]_
* If a duration is added, the _other_ date field is also automatically turned into a field. _\[**Open**: immediately or on blur after a value is input?\]_
* A range date picker will remain in range mode until it is closed by clicking on the _Save_ button:
* If only a single date is entered in range mode, the date picker will go into single date mode on next opening.
* If two dates are entered in range mode, the date picker will remain in range mode on next opening.
**Work package list**
* When clicking on the value of a start or finish column, the date picker opens with that field active:
* If that field does not exist, it will open with the equivalent of the "Add" button clicked, ie. focus on an empty field.
## Visuals
**Finish date-only work package date picker:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:596px;" src="/api/v3/attachments/55831/content">
**Click on the add button under the sart date to add it:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:596px;" src="/api/v3/attachments/55832/content">
**When both dates are present, the date picker goes into its usual range mode:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:596px;" src="/api/v3/attachments/55833/content">
**In range mode, clicking on a second date will complete the range (as it does today):**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:596px;" src="/api/v3/attachments/55836/content">
**Clearing a field with the X icon will clear the field but stay in range mode:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:596px;" src="/api/v3/attachments/55839/content">
**A start date-only date picker is possible too:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:596px;" src="/api/v3/attachments/55834/content">
### Mockup
Figma link: [https://www.figma.com/file/amVGcHqRQyR8x4EsqV9H99/Date-picker?node-id=261-26140](https://www.figma.com/file/amVGcHqRQyR8x4EsqV9H99/Date-picker?node-id=261-26140)
### Out of scope
* 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. _(<mention class="mention" data-id="9177" data-type="user" data-text="@Oliver Günther">@Oliver Günther</mention>: could you confirm this is accurate?)_
* Changing default behaviour in the admin settings