Content
View differences
Updated by Henriette Darge almost 4 years ago
This sub-feature is part of the epic related to the duration feature (<mention class="mention" data-id="31992" data-type="work_package" data-text="#31992">#31992</mention>) and describes the functioning of the new date picker.
**Please note that the date picker is being implemented in multiple stages. The first version, for 12.2, is described here:** [**#42047**](https://community.openproject.org/work_packages/42047) **(date picker excluding duration and non-working days).**
**This ticket describes** _**only**_ **additions and changes for 12.3.**
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34053/content"></div></figure>
### **Acceptance criteria**
The date picker extends the date picker from 12.2 with these new features:
* A new "duration" field next to the finish date.
* Non-working days taken into account (not included in calculation of duration) when date ranges include them. In other words, these days are skipped over.
* A checkbox to include non-working days in date ranges (and thus also duration)
#### Duration
* There are a new "Duration" field to the right of finish date
* The visual format for displaying duration is "4 days".
* When in focus, this retains only the numerical value "4".
* If the user types "4 days" (or "4 Tage", "4 jours"...), all information apart from the number is ignored. It should be considered the same as typing "4".
* On blur (remove focus), the localised word for "days" is added again.
#### Mini calendar updates
Each calendar day has a few new states:
* **When enabled:**
* In the selected range but a non-working day (blue _feedback/info/dark_ text on a _gray#6_ background)
* **When disabled:**
* In the selected range but a non-working day (_gray#5_ on a _gray#6_ background)
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34054/content"></div></figure>
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34055/content"></div></figure>
#### "Include non-working days" checkbox
* The action bar has a new checkbox on the left edge:
* **Include non-working days checkbox:** checking turns non-working days into regular days (and therefore including them even when finish date is derived using duration).
* This removes the grey background on non-working days; all days now look the same as a "normal" day.
* Unchecking the box reverses this (and non-working days become grey again and are skipped in calculations).
* If a work package already has start and end dates (and thus also duration) and the user enables this checkbox, the dates remain unchanged and the duration is updated to include the additional days now included. (For example, it might for from 3 to 5 if the date ranges previously spanned one weekend)
* If the user unchecks this box, the same will happen; start and end dates are preserved and duration is updated.
* If a work package only has one set of date information (just start date, just end date, or just duration), clicking this button will not affect any of thes evalues information until a second piece of information is also input.
* For example, for a work package with a start date only (so no duration), clicking this will immediately do nothing. However, if a second date is clicked, the duration calculated will now include non-working days.
* When migrating to 12.3, when the feature is introduced, all previous work packages will have this checkbox enabled (since non-working days will not have been taken into account in previously created work packages).
* For new work packages, this button will remain unchecked and non-working days will not be taken into account when calculating duration by default.
#### Logical changes
* Changing either a date, the duration or the non-working days will have automatic effects on the other fields.The concrete logic is described in <mention class="mention" data-id="43539" data-type="work_package" data-text="#43539">#43539</mention>
* **Technical note:** Ideally this calculation is done by the backend, so that we don't have to repeat it in the frontend.
### Visuals
**Regular scheduling, working days only (default):**
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34056/content"></div></figure>
**Regular scheduling, include non-working days:**
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34057/content"></div></figure>
**Automatic scheduling (mini calendar disabled):**
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34059/content"></div></figure>
**Manual scheduling, working days only, with relations:**
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34060/content"></div></figure>
### Simple date picker
The simple date picker (for work packages with only one date, like milesstones) still does not have a duration field, but now has the "Include non-working days" option:
**Simple date picker with the include non-working days option:**
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34061/content"></div></figure>
### Date-only date picker
The date-only date picker is used in settings for example (outside of work packages). The option to include non-working days exists there too, to allow users to select one of those days:
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34065/content"></div></figure>
### Mobile date picker
In the mobile version:
* the start/finish dates continue to each take 50% of the width and the duration field goes in a new line.
* the "include non-working days" goes in a new line before the action buttons.
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34062/content"></div></figure>
**Mobile simple date picker:**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34063/content"></div></figure>
**Mobile date-only picker (used outside of work packages):**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34064/content"></div></figure>
### Figma prototypes
Please keep in mind that Figma page has a "(12.3) with Duration" in the title (the 12.2 page looks very similar, so do double-check). When in doubt, follow this link:
https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/?node-id=1806%3A50629
**Please note that the date picker is being implemented in multiple stages. The first version, for 12.2, is described here:** [**#42047**](https://community.openproject.org/work_packages/42047) **(date picker excluding duration and non-working days).**
**This ticket describes** _**only**_ **additions and changes for 12.3.**
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34053/content"></div></figure>
### **Acceptance criteria**
The date picker extends the date picker from 12.2 with these new features:
* A new "duration" field next to the finish date.
* Non-working days taken into account (not included in calculation of duration) when date ranges include them. In other words, these days are skipped over.
* A checkbox to include non-working days in date ranges (and thus also duration)
#### Duration
* There are a new "Duration" field to the right of finish date
* The visual format for displaying duration is "4 days".
* When in focus, this retains only the numerical value "4".
* If the user types "4 days" (or "4 Tage", "4 jours"...), all information apart from the number is ignored. It should be considered the same as typing "4".
* On blur (remove focus), the localised word for "days" is added again.
#### Mini calendar updates
Each calendar day has a few new states:
* **When enabled:**
* In the selected range but a non-working day (blue _feedback/info/dark_ text on a _gray#6_ background)
* **When disabled:**
* In the selected range but a non-working day (_gray#5_ on a _gray#6_ background)
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34054/content"></div></figure>
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34055/content"></div></figure>
#### "Include non-working days" checkbox
* The action bar has a new checkbox on the left edge:
* **Include non-working days checkbox:** checking turns non-working days into regular days (and therefore including them even when finish date is derived using duration).
* This removes the grey background on non-working days; all days now look the same as a "normal" day.
* Unchecking the box reverses this (and non-working days become grey again and are skipped in calculations).
* If a work package already has start and end dates (and thus also duration) and the user enables this checkbox, the dates remain unchanged and the duration is updated to include the additional days now included. (For example, it might for from 3 to 5 if the date ranges previously spanned one weekend)
* If the user unchecks this box, the same will happen; start and end dates are preserved and duration is updated.
* If a work package only has one set of date information (just start date, just end date, or just duration), clicking this button will not affect any of thes evalues information until a second piece of information is also input.
* For example, for a work package with a start date only (so no duration), clicking this will immediately do nothing. However, if a second date is clicked, the duration calculated will now include non-working days.
* When migrating to 12.3, when the feature is introduced, all previous work packages will have this checkbox enabled (since non-working days will not have been taken into account in previously created work packages).
* For new work packages, this button will remain unchecked and non-working days will not be taken into account when calculating duration by default.
#### Logical changes
* Changing either a date, the duration or the non-working days will have automatic effects on the other fields.The concrete logic is described in <mention class="mention" data-id="43539" data-type="work_package" data-text="#43539">#43539</mention>
* **Technical note:** Ideally this calculation is done by the backend, so that we don't have to repeat it in the frontend.
### Visuals
**Regular scheduling, working days only (default):**
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34056/content"></div></figure>
**Regular scheduling, include non-working days:**
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34057/content"></div></figure>
**Automatic scheduling (mini calendar disabled):**
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34059/content"></div></figure>
**Manual scheduling, working days only, with relations:**
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34060/content"></div></figure>
### Simple date picker
The simple date picker (for work packages with only one date, like milesstones) still does not have a duration field, but now has the "Include non-working days" option:
**Simple date picker with the include non-working days option:**
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34061/content"></div></figure>
### Date-only date picker
The date-only date picker is used in settings for example (outside of work packages). The option to include non-working days exists there too, to allow users to select one of those days:
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34065/content"></div></figure>
### Mobile date picker
In the mobile version:
* the start/finish dates continue to each take 50% of the width and the duration field goes in a new line.
* the "include non-working days" goes in a new line before the action buttons.
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34062/content"></div></figure>
**Mobile simple date picker:**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34063/content"></div></figure>
**Mobile date-only picker (used outside of work packages):**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/34064/content"></div></figure>
### Figma prototypes
Please keep in mind that Figma page has a "(12.3) with Duration" in the title (the 12.2 page looks very similar, so do double-check). When in doubt, follow this link:
https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/?node-id=1806%3A50629