Content
View differences
Updated by Parimal Satyal about 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 will be 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 will be updated for the following stage to describe** _**only**_ **additions and changes (for 12.3).**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30297/content"></div></figure>
### **Acceptance criteria**
Clicking on a date field displays the date picker drop modal:
#### Overview
The date picker consists of these sections (see [Anatomy](https://community.openproject.org/#anatomy) below for design anatomy), each of which is described in more detail below:
* **An information/warning banner**
* **Scheduling option selection**
* **Start date, finish date and duration input**
* **The two-month mini-calendar**
* **Action bar (with the option to include non-working days)**
#### Default behaviour
When the date picker is opened, a field is always in focus by default.
* When opened by clicking the "start date" field, the start date will be in focus by default.
* When opened by clicking the "finish date" field, the finish date will be in focus by default.
* When opened by clicking on the "duration" field, the duration will be in focus by default.
When the unified date field is implemented, clicking on it:
* Will open the date picker with the start date in focus.
When all fields are cleared, and a date/day is clicked:
* That date will be considered a start date by default.
* However, if the user then clicks on a date prior to that initially selected date, that second date will now be considered the start date, and the initial one the finish dates.
#### Warning/Information Banner
We use this banner to inform or warn the user when there is information contextual information.
* There can be two types of banners:
* An **information banner** has a blue background and is purely informational, to give the user additional context they might otherwise miss
* A **warning banner** has an orange background and indicates that changes to this work package may have destructive or unintended consequences (affect the dates/scheduling of other work packages)
* It consists of:
* an icon
* two-line message, the first in bold
* a "GANTT preview" button that, when clicked, opens up a GANTT preview in a new window that allows the user to view relations affecting this work package.
* This is a filtered work package list (table view + GANTT view) showing only work packages related to the "main" work package (the one for which the GANTT preview was requested).
* _**Open:** We might have to show some kind of message to inform the user that certain work packages might be invisible (filtered out, or no permission)._
* There are five identified cases in which this banner is displayed:
* **Information:** The dates are automatically derived from relations (and date input is disabled in regular mode)
* **Warning:** Manual scheduling is enabled so all existing work package relations are ignored.
* **Information:** Changing the dates of this work package will affect the total project duration.
* **Warning:** Changing the dates of this work package will change the dates of related work packages
* **Warning:** Available start and finish dates are limited by relations.
#### Regular/Manual Scheduling
* There are two modes
* **Regular** is the default scheduling mode where relations and project constraints are taken into account.
* **Manual** ignores work package relations and project constraints and functions as it does today when "manual scheduling" is checked.
* A helper icon in the label will display a tooltip with this text on hover :
* "Regular scheduling takes relations and project constraints into consideration, manual will ignore them."
#### Start Date, Finish Date and Duration
* There are three fields that use the new text field components:
* Start date
* Finish date
* Duration (new element)
* The user is able to input dates either:
* by clicking on the dates on the mini-calendar (in the date picker modal)
* by inputting the dates manually in the text fields for start date, finish date and duration in ISO format.
* Selecting a start date by clicking on a date or by inputting and pressing tab will move the focus to the finish date.
* On focus, the field is outlined in blue (focus style).
* The focus on the field also determines what is selected when the user clicks on a day in the calendar (i.e, clicking on the the start date field and then clicking on a date sets that date to the start date).
* The visual format for displaying dates depends on the locale settings.
* When in focus, the date text field should convert the date into an ISO format ("2022-03-31"). The user can then manually modify the date or enter a new date in this format.
* On blur (focus removed), the display goes back to a more readable format (depending on locale, eg. "Thu 31.03.2022")
* 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 local unit for "days" is added again.
#### The two-month mini-calendar
The mini calendar allows the user to select start and end dates:
* Two months are displayed (current and next month)
* Clicking on backwards/forwards advances the calendar by a single month (eg. clicking on "forward" displays displays on the first calendar the month that was previously in the second calendar).
* By default, non-working days are non-selectable (this includes weekends and custom non-working days)
* **\[open\]** Is the change applied on blur (focus out) or directly on input?
* Today, entering date will "select" it immediately. (But not duration yet).
* **\[to discuss, to see if we want this behaviour. Check with** **@Henriette Darge\]**
When the date fields are empty:
* Clicking on a date on the calendar will set it as the start date.
* Hovering on any date _**after**_ that initially selected date:
* will give a "preview" of the end date (as in, all dates between the selected start date and this second date will be highlighted on hover).
* Clicking on a date will then set that as the finish date.
* Hovering on any date _before_ that initially selected date:
* will also give a "preview" of the period selected, but in considering that first date as the finish date.
* Clicking on a date will then set that second date as start date, and the initially selected date as the finish date.
* The start and finish dates field have "clear" buttons on focus that allow the user to clear that date (current behaviour).
* **\[open\]** Or always show the clear button, even without focus?
* The start and finish dates are have rounded corners:
* **Start date** on the left edge.
* **Finish date** on the right edge.
* **A one-day event** will have rounded corners on all edges (when start date == end date).
* Each calendar day can has multiple states depending on what kind of day it is:
* **When enabled:**
* Regular day (black text on a neutral white background)
* Non-working day (_Gray#6_ text on a _Gray#3_ background)
* Start date and finish dates (white text on a _Main_ dark blue background)
* Selected but neither start/nor end (black text on a light blue _feedback/info/light_ background)
* In the selected range but a non-working day (blue _feedback/info/dark_ text on a _gray#6_ background)
* **When disabled:**
* Regular day (_gray#3_ text on a neutral white background)
* Non-working day (_gray#4_ text on a _gray#3_ background)
* Start date (_gray#3_ text on a _gray#5_ background)
* Selected but neither start/nor end (_gray#4_ text on a _gray#5_ background)
* In the selected range but a non-working day (_gray#6_ on a _gray#4_ background)
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29238/content"></div><figcaption class="op-uc-figure--description">Date picker mini calendar when dates are enabled/clickable</figcaption></figure>
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29239/content"></div><figcaption class="op-uc-figure--description">Date picker mini calendar when dates are disabled/non-clickable</figcaption></figure>
#### Action bar with "include non-working days" option
* The action bar has three actions:
* **Include non-working days checkbox**, which turns non-working days into regular days (and therefore including them even when finish date is derived using duration)
* **Cancel button** (outlined/main), discards changes
* **Apply button** (filled/main), applies changes
### Anatomy
The date picker is built out of several components already described in our design system, and some new ones.
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30298/content"></div></figure>
### Visuals
**Regular scheduling, working days only (default):**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30299/content"></div></figure>
**Regular scheduling, include non-working days:**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30303/content"></div></figure>
**Manual scheduling, working days only:**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30304/content"></div></figure>
**Manual scheduling, include non-working days:**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30302/content"></div></figure>
**Automatically scheduled, modification blocked with info banner**
_Info banner: Dates are derived from relations:_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30305/content"></div></figure>
**Manual scheduling with warning banner**
_Warning banner: relations are ignored:_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30306/content"></div></figure>
**Regular scheduling with info banner**
_Info banner: Changing dates will affect project duration:_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30307/content"></div></figure>
**Regular scheduling with warning banner**
_Warning banner: Changing dates will affect dates of related packages (following or preceeding):_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30309/content"></div></figure>
**Manual scheduling with warning banner**
_Warning banner: available start and finish dates are limited by relations (warning because dates might have changed)_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30310/content"></div></figure>
###
### Simple Date Picker
There will also be a "simple" date picker with only a single _date_ field and a single calendar. A work package describing this will come shortly, but a preview exists:
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30311/content"></div></figure>
### Figma prototypes
All states of the date picker and mini calendar are illustrated in the Figma prototype, along with the scenarios described [in the duration epic](https://community.openproject.org/projects/openproject/work_packages/31992/activity):
[https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/?node-id=1082%3A15447](https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/?node-id=1082%3A15447)
**Please note that the date picker will be 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 will be updated for the following stage to describe** _**only**_ **additions and changes (for 12.3).**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30297/content"></div></figure>
### **Acceptance criteria**
Clicking on a date field displays the date picker drop modal:
#### Overview
The date picker consists of these sections (see [Anatomy](https://community.openproject.org/#anatomy) below for design anatomy), each of which is described in more detail below:
* **An information/warning banner**
* **Scheduling option selection**
* **Start date, finish date and duration input**
* **The two-month mini-calendar**
* **Action bar (with the option to include non-working days)**
#### Default behaviour
When the date picker is opened, a field is always in focus by default.
* When opened by clicking the "start date" field, the start date will be in focus by default.
* When opened by clicking the "finish date" field, the finish date will be in focus by default.
* When opened by clicking on the "duration" field, the duration will be in focus by default.
When the unified date field is implemented, clicking on it:
* Will open the date picker with the start date in focus.
When all fields are cleared, and a date/day is clicked:
* That date will be considered a start date by default.
* However, if the user then clicks on a date prior to that initially selected date, that second date will now be considered the start date, and the initial one the finish dates.
#### Warning/Information Banner
We use this banner to inform or warn the user when there is information contextual information.
* There can be two types of banners:
* An **information banner** has a blue background and is purely informational, to give the user additional context they might otherwise miss
* A **warning banner** has an orange background and indicates that changes to this work package may have destructive or unintended consequences (affect the dates/scheduling of other work packages)
* It consists of:
* an icon
* two-line message, the first in bold
* a "GANTT preview" button that, when clicked, opens up a GANTT preview in a new window that allows the user to view relations affecting this work package.
* This is a filtered work package list (table view + GANTT view) showing only work packages related to the "main" work package (the one for which the GANTT preview was requested).
* _**Open:** We might have to show some kind of message to inform the user that certain work packages might be invisible (filtered out, or no permission)._
* There are five identified cases in which this banner is displayed:
* **Information:** The dates are automatically derived from relations (and date input is disabled in regular mode)
* **Warning:** Manual scheduling is enabled so all existing work package relations are ignored.
* **Information:** Changing the dates of this work package will affect the total project duration.
* **Warning:** Changing the dates of this work package will change the dates of related work packages
* **Warning:** Available start and finish dates are limited by relations.
#### Regular/Manual Scheduling
* There are two modes
* **Regular** is the default scheduling mode where relations and project constraints are taken into account.
* **Manual** ignores work package relations and project constraints and functions as it does today when "manual scheduling" is checked.
* A helper icon in the label will display a tooltip with this text on hover :
* "Regular scheduling takes relations and project constraints into consideration, manual will ignore them."
#### Start Date, Finish Date and Duration
* There are three fields that use the new text field components:
* Start date
* Finish date
* Duration (new element)
* The user is able to input dates either:
* by clicking on the dates on the mini-calendar (in the date picker modal)
* by inputting the dates manually in the text fields for start date, finish date and duration in ISO format.
* Selecting a start date by clicking on a date or by inputting and pressing tab will move the focus to the finish date.
* On focus, the field is outlined in blue (focus style).
* The focus on the field also determines what is selected when the user clicks on a day in the calendar (i.e, clicking on the the start date field and then clicking on a date sets that date to the start date).
* The visual format for displaying dates depends on the locale settings.
* When in focus, the date text field should convert the date into an ISO format ("2022-03-31"). The user can then manually modify the date or enter a new date in this format.
* On blur (focus removed), the display goes back to a more readable format (depending on locale, eg. "Thu 31.03.2022")
* 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 local unit for "days" is added again.
#### The two-month mini-calendar
The mini calendar allows the user to select start and end dates:
* Two months are displayed (current and next month)
* Clicking on backwards/forwards advances the calendar by a single month (eg. clicking on "forward" displays displays on the first calendar the month that was previously in the second calendar).
* By default, non-working days are non-selectable (this includes weekends and custom non-working days)
* **\[open\]** Is the change applied on blur (focus out) or directly on input?
* Today, entering date will "select" it immediately. (But not duration yet).
* **\[to discuss, to see if we want this behaviour. Check with** **@Henriette Darge\]**
When the date fields are empty:
* Clicking on a date on the calendar will set it as the start date.
* Hovering on any date _**after**_ that initially selected date:
* will give a "preview" of the end date (as in, all dates between the selected start date and this second date will be highlighted on hover).
* Clicking on a date will then set that as the finish date.
* Hovering on any date _before_ that initially selected date:
* will also give a "preview" of the period selected, but in considering that first date as the finish date.
* Clicking on a date will then set that second date as start date, and the initially selected date as the finish date.
* The start and finish dates field have "clear" buttons on focus that allow the user to clear that date (current behaviour).
* **\[open\]** Or always show the clear button, even without focus?
* The start and finish dates are have rounded corners:
* **Start date** on the left edge.
* **Finish date** on the right edge.
* **A one-day event** will have rounded corners on all edges (when start date == end date).
* Each calendar day can has multiple states depending on what kind of day it is:
* **When enabled:**
* Regular day (black text on a neutral white background)
* Non-working day (_Gray#6_ text on a _Gray#3_ background)
* Start date and finish dates (white text on a _Main_ dark blue background)
* Selected but neither start/nor end (black text on a light blue _feedback/info/light_ background)
* In the selected range but a non-working day (blue _feedback/info/dark_ text on a _gray#6_ background)
* **When disabled:**
* Regular day (_gray#3_ text on a neutral white background)
* Non-working day (_gray#4_ text on a _gray#3_ background)
* Start date (_gray#3_ text on a _gray#5_ background)
* Selected but neither start/nor end (_gray#4_ text on a _gray#5_ background)
* In the selected range but a non-working day (_gray#6_ on a _gray#4_ background)
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29238/content"></div><figcaption class="op-uc-figure--description">Date picker mini calendar when dates are enabled/clickable</figcaption></figure>
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29239/content"></div><figcaption class="op-uc-figure--description">Date picker mini calendar when dates are disabled/non-clickable</figcaption></figure>
#### Action bar with "include non-working days" option
* The action bar has three actions:
* **Include non-working days checkbox**, which turns non-working days into regular days (and therefore including them even when finish date is derived using duration)
* **Cancel button** (outlined/main), discards changes
* **Apply button** (filled/main), applies changes
### Anatomy
The date picker is built out of several components already described in our design system, and some new ones.
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30298/content"></div></figure>
### Visuals
**Regular scheduling, working days only (default):**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30299/content"></div></figure>
**Regular scheduling, include non-working days:**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30303/content"></div></figure>
**Manual scheduling, working days only:**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30304/content"></div></figure>
**Manual scheduling, include non-working days:**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30302/content"></div></figure>
**Automatically scheduled, modification blocked with info banner**
_Info banner: Dates are derived from relations:_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30305/content"></div></figure>
**Manual scheduling with warning banner**
_Warning banner: relations are ignored:_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30306/content"></div></figure>
**Regular scheduling with info banner**
_Info banner: Changing dates will affect project duration:_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30307/content"></div></figure>
**Regular scheduling with warning banner**
_Warning banner: Changing dates will affect dates of related packages (following or preceeding):_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30309/content"></div></figure>
**Manual scheduling with warning banner**
_Warning banner: available start and finish dates are limited by relations (warning because dates might have changed)_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30310/content"></div></figure>
###
### Simple Date Picker
There will also be a "simple" date picker with only a single _date_ field and a single calendar. A work package describing this will come shortly, but a preview exists:
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/30311/content"></div></figure>
### Figma prototypes
All states of the date picker and mini calendar are illustrated in the Figma prototype, along with the scenarios described [in the duration epic](https://community.openproject.org/projects/openproject/work_packages/31992/activity):
[https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/?node-id=1082%3A15447](https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/?node-id=1082%3A15447)