Content
View differences
Updated by Henriette Darge 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 for 12.2, **without the duration and non-working day features.**
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32095/content"></div></figure>
### **Acceptance criteria**
Clicking on a date field displays the date picker drop modal:
#### 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 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 second date prior to that initially selected date, that second date will now be considered the start date, and the initial one the finish date.
* _This behaviour needs to be tested in implementaiton to ensure it "feels" right, especially when making a series of modficcations._
Other _click-based_ behaviour described in in the "[Rules for date selection](https://community.openproject.org/projects/openproject/work_packages/42047/activity#rules-for-date-selection)" section below.
#### 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 (warning or information)
* two-line message, the first in bold
* a "Show relations" 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).
* There are four identified cases in which this banner is displayed:
* **Warning:** Manual scheduling is enabled so all existing work package relations are ignored. (This is only visible when the work package in question has relations; a manually scheduled work package with no relations will not show this banner).
* **Warning:** Changing the dates of this work package will change the dates of related work packages
* **Information:** Available start and finish dates are limited by relations.
* **Information:** The dates are automatically derived from relations (and date input is disabled).
#### Regular/Manual Scheduling
* The "Manual scheduling" checkbox is now in a new line by itself above the start/finish dates, and left-aligned.
* The current functionality maintained.
* ~~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 and Finish Date
* There are two fields that use the new text field components of equal width:
* Start date
* Finish date
* Each field has a "today" link underneath it.
* There is space left for where duration field will eventually go, but this is not displayed yet.
* That empty space is by design (to avoid the two date fields taking 50% width each, thus suggesting to the the the mini calendars below represent selections for each field).
* 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 and finish date 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 the primary colour blue (current 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 two-month mini-calendar
The mini calendar allows the user to select start and end dates:
* Each mini calendar will show weekends differently in grey as it does today. However, this is purely visual and has no functional value in 12.2.
* 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).
* Typing a ISO-standard date will select that date automatically in the calendar.
* 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).
* 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 white background)
* Start date and finish dates (white text on a dark blue background)
* Selected but neither start/nor end (black text on a light blue background)
* Today (black on our standard current date yellow background)
* **When disabled:**
* Regular day (Gray 4 on a white background)
* Start date and finish dates (Gray 5 text on a light Gray 3 background)
* Selected but neither start/nor end (Gray 3 text on a Gray 5 background)
* Today (Gray 4 text on our standard current date yellow background)
* These colours do not change or adapt to themes or custom colours and are always these colours.
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32096/content"></div></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/32097/content"></div></figure>
#### Action bar
* There are two to buttons at the bottom of the modal.
* **Cancel**, discards changes
* **Save**, primary blue, applies changes
### Visuals
_**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/32098/content"></div></figure>
_**Manually scheduled (when work package has no 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/32099/content"></div></figure>
_**Info banner: Dates are limited by 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/32100/content"></div></figure>
_**Automatically scheduled, modification blocked with info banner:**_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32101/content"></div></figure>
_**Manual scheduling, all relations ignored warning banner:**_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32102/content"></div></figure>
_**Changing dates will affects dates of related work packages warning banner:**_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32103/content"></div></figure>
### Simple Date Picker (single-day)
The simple date picker is for single-day items (like Milestones) only single _date_ field.
* The only difference with the regular work package date picker is that the unique date field is titled "Date" (no notion of start or finish dates).
* The selected date is rounded on all corners.
* The simple date picker can also have the information banner (with all the same states as the work package information date picker).
_**Note:**_
_The area to the right of the "Scheduling" and "Date" fields looks rather empty. This is a conscious decision in anticipation of other options that will come with later releases (involving automatic scheduling modes)._
_**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/32104/content"></div></figure>
_**Simple date picker with banner:**_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32105/content"></div></figure>
### Date-only picker
_There are date pickers outside of work packages (log time, log unit costs...). Updating those implementations to look and behave like the date pickers mentioned here is not part of this feature; a separate ticket exists for these other "date-only" date pickers: <mention class="mention" data-id="42358" data-type="work_package" data-text="#42358">#42358</mention>._
###
### Mobile version
The mobile version:
* Is displayed in a modal that takes almost the full available screen width.
* **\[open\]** Can we set a single value for the outside margins (1.25 or 1.5 REM, needs testing) or do we need to condition this on breakpoints?
* ~~The start and finish dates will only display the date in ISO format (yyyy.mm.dd) and not our usual human-readable form that includes the day of the week (this is purely to save space).~~
* There is only one mini calendar (vs the two in our non-mobile version).
* The mobile date picker displays a simplified version of the banner:
* Without the left-side icon
* Without the second line of text (only the first line is displayed)
* With the usual "Show relations" button.
* The simple version of the mobile date picker:
* Has a single date field titled simply "Date"
* that takes 100% of the available width
* Can only allow picking a single date in the calendar (rounded on all corners)
_**Mobile date-picker:**_
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32107/content"></div></figure>
_**Mobile date-picker with banner:**_
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32108/content"></div></figure>
_**Mobile simple date-picker (single-day):**_
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32091/content"></div></figure>
_**Mobile date-only picker:**_
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32109/content"></div></figure>
### Rules for date selection
* When the date picker is opened, by default, start date is in focus (unless you click on finish date).
* If no date has been input, the field that is focused takes the date that is clicked on.
* If one date has been input (eg. start date), the focus changes to the other date (eg. finish date). Clicking on two dates in this order would then select the start and finish dates.
* Unless the second date is earlier than start date, in which case, the dates inverse.
* If two dates (start _and_ finish dates) are already input, there are three cases:
* If you click a date that is before the start date, this modifies the start date (independent of focus).
* If you click a date in between the start and finish dates, the field that takes this date depends on the focus.
* If you a click a date that is after the finish date, this depends on the focus:
* If start date is focused, then the selected date becomes the new start date, and the finish date is cleared (and now in focus).
* If the finish date is focused, the new date is taken, start date is maintaned.
* If you click on the same date twice, it becomes the start _and_ the finish date.
### Open Questions
* **\[answered, needs discussion\]** Need to verify if the different information banners are exclusive, or if there can be multiple ones (in which case, we need to determine priority).
* There are two information banners that are exclusive and can not "clash with others"
* Automatically scheduled
* Manually scheduled
* For the three others, this is a proposition for a priority order for which one to show if there are multiple (only the highest one is displayed). Warnings naturally have more priority than information ones:
* Changing dates affects dates of other work packages
* Available start/finish dates limited by relations
* see comment #3 for more concerns
* **\[open\]** Need to check if focus behaviour as described makes sense in practice.
* **\[answered\]** How shall the modal close on mobile? Currently it is defined via a cancel button which is inconsistent to the mobile drop down behaviour we have for example for projects include.
* The modal will close in mobile as it does today, with the close icon.
### Out of scope
* This version of the date picker does not include two features that will come later (post 12.2):
* **Duration** and
* **Non-working days**
* These are described in <mention class="mention" data-id="41341" data-type="work_package" data-text="#41341">#41341</mention>.
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32095/content"></div></figure>
### **Acceptance criteria**
Clicking on a date field displays the date picker drop modal:
#### 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 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 second date prior to that initially selected date, that second date will now be considered the start date, and the initial one the finish date.
* _This behaviour needs to be tested in implementaiton to ensure it "feels" right, especially when making a series of modficcations._
Other _click-based_ behaviour described in in the "[Rules for date selection](https://community.openproject.org/projects/openproject/work_packages/42047/activity#rules-for-date-selection)" section below.
#### 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 (warning or information)
* two-line message, the first in bold
* a "Show relations" 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).
* There are four identified cases in which this banner is displayed:
* **Warning:** Manual scheduling is enabled so all existing work package relations are ignored. (This is only visible when the work package in question has relations; a manually scheduled work package with no relations will not show this banner).
* **Warning:** Changing the dates of this work package will change the dates of related work packages
* **Information:** Available start and finish dates are limited by relations.
* **Information:** The dates are automatically derived from relations (and date input is disabled).
#### Regular/Manual Scheduling
* The "Manual scheduling" checkbox is now in a new line by itself above the start/finish dates, and left-aligned.
* The current functionality maintained.
* ~~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 and Finish Date
* There are two fields that use the new text field components of equal width:
* Start date
* Finish date
* Each field has a "today" link underneath it.
* There is space left for where duration field will eventually go, but this is not displayed yet.
* That empty space is by design (to avoid the two date fields taking 50% width each, thus suggesting to the the the mini calendars below represent selections for each field).
* 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 and finish date 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 the primary colour
* 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 two-month mini-calendar
The mini calendar allows the user to select start and end dates:
* Each mini calendar will show weekends differently in grey as it does today. However, this is purely visual and has no functional value in 12.2.
* 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).
* Typing a ISO-standard date will select that date automatically in the calendar.
* 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).
* 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 white background)
* Start date and finish dates (white text on a dark blue background)
* Selected but neither start/nor end (black text on a light blue background)
* Today (black on our standard current date yellow background)
* **When disabled:**
* Regular day (Gray 4 on a white background)
* Start date and finish dates (Gray 5 text on a light Gray 3 background)
* Selected but neither start/nor end (Gray 3 text on a Gray 5 background)
* Today (Gray 4 text on our standard current date yellow background)
* These colours do not change or adapt to themes or custom colours and are always these colours.
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32096/content"></div></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/32097/content"></div></figure>
#### Action bar
* There are two
* **Cancel**, discards changes
* **Save**, primary blue, applies changes
### Visuals
_**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/32098/content"></div></figure>
_**Manually scheduled (when work package has no 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/32099/content"></div></figure>
_**Info banner: Dates are limited by 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/32100/content"></div></figure>
_**Automatically scheduled, modification blocked with info banner:**_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32101/content"></div></figure>
_**Manual scheduling, all relations ignored warning banner:**_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32102/content"></div></figure>
_**Changing dates will affects dates of related work packages warning banner:**_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32103/content"></div></figure>
### Simple Date Picker (single-day)
The simple date picker is for single-day items (like Milestones) only single _date_ field.
* The only difference with the regular work package date picker is that the unique date field is titled "Date" (no notion of start or finish dates).
* The selected date is rounded on all corners.
* The simple date picker can also have the information banner (with all the same states as the work package information date picker).
_**Note:**_
_The area to the right of the "Scheduling" and "Date" fields looks rather empty. This is a conscious decision in anticipation of other options that will come with later releases (involving automatic scheduling modes)._
_**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/32104/content"></div></figure>
_**Simple date picker with banner:**_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32105/content"></div></figure>
### Date-only picker
_There are date pickers outside of work packages (log time, log unit costs...). Updating those implementations to look and behave like the date pickers mentioned here is not part of this feature; a separate ticket exists for these other "date-only" date pickers: <mention class="mention" data-id="42358" data-type="work_package" data-text="#42358">#42358</mention>._
###
### Mobile version
The mobile version:
* Is displayed in a modal that takes almost the full available screen width.
* **\[open\]** Can we set a single value for the outside margins (1.25 or 1.5 REM, needs testing) or do we need to condition this on breakpoints?
* ~~The start and finish dates will only display the date in ISO format (yyyy.mm.dd) and not our usual human-readable form that includes the day of the week (this is purely to save space).~~
* There is only one mini calendar (vs the two in our non-mobile version).
* The mobile date picker displays a simplified version of the banner:
* Without the left-side icon
* Without the second line of text (only the first line is displayed)
* With the usual "Show relations" button.
* The simple version of the mobile date picker:
* Has a single date field titled simply "Date"
* that takes 100% of the available width
* Can only allow picking a single date in the calendar (rounded on all corners)
_**Mobile date-picker:**_
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32107/content"></div></figure>
_**Mobile date-picker with banner:**_
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32108/content"></div></figure>
_**Mobile simple date-picker (single-day):**_
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32091/content"></div></figure>
_**Mobile date-only picker:**_
<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32109/content"></div></figure>
### Rules for date selection
* When the date picker is opened, by default, start date is in focus (unless you click on finish date).
* If no date has been input, the field that is focused takes the date that is clicked on.
* If one date has been input (eg. start date), the focus changes to the other date (eg. finish date). Clicking on two dates in this order would then select the start and finish dates.
* Unless the second date is earlier than start date, in which case, the dates inverse.
* If two dates (start _and_ finish dates) are already input, there are three cases:
* If you click a date that is before the start date, this modifies the start date (independent of focus).
* If you click a date in between the start and finish dates, the field that takes this date depends on the focus.
* If you a click a date that is after the finish date, this depends on the focus:
* If start date is focused, then the selected date becomes the new start date, and the finish date is cleared (and now in focus).
* If the finish date is focused, the new date is taken, start date is maintaned.
* If you click on the same date twice, it becomes the start _and_ the finish date.
### Open Questions
* **\[answered, needs discussion\]** Need to verify if the different information banners are exclusive, or if there can be multiple ones (in which case, we need to determine priority).
* There are two information banners that are exclusive and can not "clash with others"
* Automatically scheduled
* Manually scheduled
* For the three others, this is a proposition for a priority order for which one to show if there are multiple (only the highest one is displayed). Warnings naturally have more priority than information ones:
* Changing dates affects dates of other work packages
* Available start/finish dates limited by relations
* see comment #3 for more concerns
* **\[open\]** Need to check if focus behaviour as described makes sense in practice.
* **\[answered\]** How shall the modal close on mobile? Currently it is defined via a cancel button which is inconsistent to the mobile drop down behaviour we have for example for projects include.
* The modal will close in mobile as it does today, with the close icon.
### Out of scope
* This version of the date picker does not include two features that will come later (post 12.2):
* **Duration** and
* **Non-working days**
* These are described in <mention class="mention" data-id="41341" data-type="work_package" data-text="#41341">#41341</mention>.