Content
View differences
Updated by Niels Lindenthal about 3 years ago
### Context
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.
* [ ] _Needs clarification_: By default this is the finish date for new work package, but this can be configured in the admin settings. It also allows users to easily go back to range mode by simply adding the other date field.
### 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.
* 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.
**Admin page**
* _\[**Open**: to be defined\]_ Allow admins to choose the default setting for new work packages:
* Finish date only (default)
* Start date only
* Start and finish date
### Visuals
**Finish date-only work package date picker:**
<img class="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="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="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="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="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="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?)_
### Original bug report (archived 14.04.2023)
> ##### Steps to reproduce
>
> 1. Create a work package with only a finish date
> 2. Open the date picker
> 3. Tab to the finish date so this is active
> 4. Change a date in the mini calendar
>
> ##### What is the buggy behavior?
>
> * Not the active field (finish date) is changed. The first click changes the start date.
>
> #### <img class="op-uc-image op-uc-image_inline" style="width:595px;" src="/api/v3/attachments/54524/content">
>
> ##### What is the expected behavior?
>
> 1. Clicking in the mini calendar changes the date of the active date field (similar to Google flights)
>
> ### <img class="op-uc-image op-uc-image_inline" style="width:581px;" src="/api/v3/attachments/54523/content">
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.
* [ ] _Needs clarification_: By default this is the finish date for new work package, but this can be configured in the admin settings. It also allows users to easily go back to range mode by simply adding the other date field.
### 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.
* 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.
**Admin page**
* _\[**Open**: to be defined\]_ Allow admins to choose the default setting for new work packages:
* Finish date only (default)
* Start date only
* Start and finish date
### Visuals
**Finish date-only work package date picker:**
<img class="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="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="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="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="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="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?)_
### Original bug report (archived 14.04.2023)
> ##### Steps to reproduce
>
> 1. Create a work package with only a finish date
> 2. Open the date picker
> 3. Tab to the finish date so this is active
> 4. Change a date in the mini calendar
>
> ##### What is the buggy behavior?
>
> * Not the active field (finish date) is changed. The first click changes the start date.
>
> #### <img class="op-uc-image op-uc-image_inline" style="width:595px;" src="/api/v3/attachments/54524/content">
>
> ##### What is the expected behavior?
>
> 1. Clicking in the mini calendar changes the date of the active date field (similar to Google flights)
>
> ### <img class="op-uc-image op-uc-image_inline" style="width:581px;" src="/api/v3/attachments/54523/content">