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.** Begin of the insertion



End of the insertion Begin of the deletion

End of the deletion <figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/32034/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/31798/content"></div></figure>End of the deletion

### **Acceptance criteria**

Clicking on a date field displays the date picker drop modal:

#### Begin of the deletion 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 and finish date**
* **The two-month mini-calendar**
* **Action bar**

####End of the deletion Default behaviour

When the date picker is opened, a field is always in focus by default.

* When opened by clicking the &quot;start date&quot; field, the start date will be in focus by default.
* When opened by clicking the &quot;finish date&quot; field, the finish date will be in focus by default.

Begin of the insertion_~~(ForEnd of the insertion Begin of the deletion _(ForEnd of the deletion information, when the unified date field is implemented, clicking on Begin of the insertionit:~~_End of the insertion Begin of the deletion it:_End of the deletion

* Begin of the insertion_~~WillEnd of the insertion Begin of the deletion _WillEnd of the deletion open the date picker with the start date in Begin of the insertionfocus.)~~_End of the insertion Begin of the deletion focus.)_End of the deletion

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 &quot;feels&quot; right, especially when making a series of modficcations._

#### 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 Begin of the insertion&quot;Show relations&quot;End of the insertion Begin of the deletion &quot;GANTT preview&quot;End of the deletion 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 &quot;main&quot; work package (the one for which the GANTT preview was requested).
* Begin of the insertion_~~**Open:**End of the insertion Begin of the deletion _**Open:**End of the deletion We might have to show some kind of message to inform the user that certain work packages might be invisible (filtered out, or no Begin of the insertionpermission).~~_End of the insertion Begin of the deletion permission)._End of the deletion
* There are Begin of the insertionfourEnd of the insertion Begin of the deletion fiveEnd of the deletion identified cases in which this banner is displayed:
* Begin of the deletion **Information:** The dates are automatically derived from relations (and date input is disabled in regular mode)
* End of the deletion **Warning:** Manual scheduling is enabled so all existing work package relations are ignored. Begin of the insertion(This is only visible whenEnd of the insertion Begin of the deletion
* ~~**Information:** ChangingEnd of the deletion the Begin of the deletion dates of thisEnd of the deletion work package Begin of the insertionin question has relations; a manually scheduled work package with no relationsEnd of the insertion will Begin of the insertionnot show this banner).End of the insertion Begin of the deletion affect the total project duration~~.End of the deletion
* **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. Begin of the insertion
* **Information:** The dates are automatically derived from relations (and date input is disabled).End of the insertion

#### Regular/Manual Scheduling

* Begin of the insertionThe &quot;Manual scheduling&quot; checkbox is now in a new line by itself above the start/finish dates, and left-aligned.
* The current functionality maintained.
* ~~ThereEnd of the insertion Begin of the deletion ThereEnd of the deletion are two Begin of the insertionmodes~~End of the insertion Begin of the deletion modesEnd of the deletion
* Begin of the insertion~~**Regular**End of the insertion Begin of the deletion **Regular**End of the deletion is the default scheduling mode where relations and project constraints are taken into Begin of the insertionaccount.~~End of the insertion Begin of the deletion account.End of the deletion
* Begin of the insertion~~**Manual**End of the insertion Begin of the deletion **Manual**End of the deletion ignores work package relations and project constraints and functions as it does today when &quot;manual scheduling&quot; is Begin of the insertionchecked.~~End of the insertion Begin of the deletion checked.End of the deletion
* Begin of the insertion~~AEnd of the insertion Begin of the deletion AEnd of the deletion helper icon in the label will display a tooltip with this text on hover Begin of the insertion:~~End of the insertion Begin of the deletion :End of the deletion
* Begin of the insertion~~&quot;RegularEnd of the insertion Begin of the deletion &quot;RegularEnd of the deletion scheduling takes relations and project constraints into consideration, manual will ignore Begin of the insertionthem.&quot;~~End of the insertion Begin of the deletion them.&quot;End of the deletion

#### Start Date and Finish Date

* There are two fields that use the new text field components of equal width:
* Start date
* Finish date
* Begin of the insertionEach field has a &quot;today&quot; 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).
* End of the insertion 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 blue Begin of the insertion(currentEnd of the insertion Begin of the deletion (focusEnd of the deletion 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). Begin of the deletion
* **\[open\]** The visual format for displaying dates depends on the locale settings.
* Or we will use the ISO format everywhere. (to be discussed)
* ~~When in focus, the date text field should convert the date into an ISO format (&quot;2022-03-31&quot;). 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. &quot;Thu 31.03.2022&quot;)~~End of the deletion

#### The two-month mini-calendar

The mini calendar allows the user to select start and end dates:

* Begin of the insertionEach 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.
* End of the insertion Two months are displayed (current and next Begin of the insertionmonth).End of the insertion Begin of the deletion month)End of the deletion
* Clicking on backwards/forwards advances the calendar by a single month (eg. clicking on &quot;forward&quot; displays displays on the first calendar the month that was previously in the second calendar).
* Begin of the insertionTyping a ISO-standardEnd of the insertion Begin of the deletion **\[open\]** Is the change applied on blur (focus out) or directly on input?
* Today, enteringEnd of the deletion date will Begin of the insertionselect that date automatically in the calendar.End of the insertion Begin of the deletion &quot;select&quot; it immediately. We might retain this behaviour.End of the deletion
* 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 &quot;preview&quot; 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 &quot;preview&quot; 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 &quot;clear&quot; buttons on focus that allow the user to clear that date (current behaviour). Begin of the deletion
* **\[open\]** If, in our design system, we decide to always show the clear button (x) even on blur, these fields will respect that.End of the deletion
* 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 Begin of the insertion(black textEnd of the insertion Begin of the deletion (_Basic/Black_End of the deletion on a Begin of the insertionwhiteEnd of the insertion Begin of the deletion neutral _Basic/White_End of the deletion background)
* Start date and finish dates Begin of the insertion(white textEnd of the insertion Begin of the deletion (_Basic/White_End of the deletion on a Begin of the insertiondarkEnd of the insertion Begin of the deletion _Main/Main Dark_End of the deletion blue background)
* Selected but neither start/nor end (black text on a light blue Begin of the deletion F\_eedback/Info/Light\_End of the deletion background)
* Today Begin of the insertion(blackEnd of the insertion Begin of the deletion (_Basic/Black_ textEnd of the deletion on Begin of the insertionour standard current dateEnd of the insertion yellow Begin of the deletion _Indication/Current date_End of the deletion background)
* **When disabled:**
* Regular day Begin of the insertion(Gray 3End of the insertion Begin of the deletion (_Basic/Gray 3_ textEnd of the deletion on a Begin of the deletion neutralEnd of the deletion white background)
* Start date Begin of the insertion(Gray 3End of the insertion Begin of the deletion (\_Basic/_G\_ray 3_End of the deletion text on a Begin of the insertionlight gray 4End of the insertion Begin of the deletion _gray#5_End of the deletion background)
* Selected but neither start/nor end Begin of the insertion(Gray 4End of the insertion Begin of the deletion (\_Basic/_G\_ray 4_End of the deletion text on a Begin of the insertionGray 5End of the insertion Begin of the deletion \_Basic/_G\_ray 5_End of the deletion background)
* Today Begin of the insertion(Gray 4End of the insertion Begin of the deletion (\_Basic/_G\_ray 4_End of the deletion text on Begin of the insertionour standard current dateEnd of the insertion yellow Begin of the deletion _Indication/Current date_End of the deletion background) Begin of the insertion
* These colours do not change or adapt to themes or custom colours and are always these colours. End of the insertion

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/32035/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/31095/content"></div></figure>End of the deletion

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/32036/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/31096/content"></div></figure>End of the deletion

#### Action bar

* Begin of the insertionThere are to buttons at the bottom of the modal.End of the insertion Begin of the deletion The action bar has two actions:End of the deletion
* Begin of the insertion**Cancel**,End of the insertion Begin of the deletion **Cancel button** (outlined/main),End of the deletion discards changes
* Begin of the insertion**Save**, primary blue,End of the insertion Begin of the deletion **Apply button** (filled/main),End of the deletion applies changes

### Begin of the insertionVisualsEnd of the insertion Begin of the deletion AnatomyEnd of the deletion

Begin of the insertion_**Default:**_End of the insertion Begin of the deletion The date picker is built out of several components already described in our design system, and some new ones.End of the deletion

Begin of the insertion<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32037/content"></div></figure>



_**Manually scheduled (when work package has no relations):**_End of the insertion Begin of the deletion _**\[Updated visual to be added\]**_End of the deletion

Begin of the insertion<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32039/content"></div></figure>



_**Info banner: Dates are derived from relations:**_End of the insertion Begin of the deletion ### VisualsEnd of the deletion

Begin of the deletion **Regular scheduling**

End of the deletion <figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/32043/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/31800/content"></div></figure>End of the deletion

**Automatically scheduled, modification blocked with info banner** Begin of the deletion
_Info banner: Dates are derived from relations:_End of the deletion

Begin of the insertion<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32040/content"></div></figure>End of the insertion Begin of the deletion * _**\[Updated visual to be added\]**_End of the deletion

Begin of the insertion_**Manual scheduling, allEnd of the insertion Begin of the deletion **Manual scheduling with warning banner**
_Warning banner:End of the deletion relations Begin of the insertionignored warning banner:**_End of the insertion Begin of the deletion are ignored:_End of the deletion

Begin of the insertion<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32041/content"></div></figure>



_**ChangingEnd of the insertion Begin of the deletion * _**\[Updated visual to be added\]**_

**Regular scheduling with info banner (project duration)**
_Info banner: ChangingEnd of the deletion dates will Begin of the insertionaffectsEnd of the insertion Begin of the deletion affect project duration:_

* _**\[Updated visual to be added\]**_

**Regular scheduling with warning banner (related work packages affected)**
_Warning banner: ChangingEnd of the deletion dates Begin of the deletion will affect datesEnd of the deletion of related Begin of the insertionworkEnd of the insertion packages Begin of the insertionwarning banner:**_End of the insertion Begin of the deletion (following or preceeding):_End of the deletion

Begin of the insertion<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32042/content"></div></figure>End of the insertion Begin of the deletion * _**\[Updated visual to be added\]**_End of the deletion

### 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 &quot;Date&quot; (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 &quot;Scheduling&quot; and &quot;Date&quot; 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" Begin of the insertionsrc="/api/v3/attachments/32044/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/31801/content"></div></figure>End of the deletion

**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" Begin of the insertionsrc="/api/v3/attachments/32045/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/31802/content"></div></figure>End of the deletion

### Begin of the insertionDate-only picker

The date-only picker is used for selected start/end dates outside of work packages (for settings for example):

* It doesn&#39;t have the scheduling or banner bits, and is otherwise the same as a regular date picker.
* The selected date is rounded on all corners.

<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32049/content"></div></figure>

###

###End of the insertion 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 &quot;GANTT preview&quot; button.
* The simple version of the mobile date picker:
* Has a single date field titled simply &quot;Date&quot;
* that takes 100% of the available width
* Can only allow picking a single date in the calendar (rounded on all corners)

Begin of the insertion_**Mobile date-picker:**_End of the insertion Begin of the deletion **Mobile date-picker:**End of the deletion

Begin of the insertion<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32046/content"></div></figure>



_**MobileEnd of the insertion Begin of the deletion * _**\[Updated visual to be added\]**_

**MobileEnd of the deletion date-picker with Begin of the insertionbanner:**_End of the insertion Begin of the deletion banner:**End of the deletion

Begin of the insertion<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32047/content"></div></figure>



End of the insertion Begin of the deletion * _**\[Updated visual to be added\]**_

End of the deletion **Mobile simple date-picker (single-day):**

Begin of the insertion<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32048/content"></div></figure>



End of the insertion Begin of the deletion * _**\[Updated visual to be added\]**_

End of the deletion ### Open Questions

* Begin of the insertion**\[proposition to be discussed\]**End of the insertion Begin of the deletion **\[open\]**End of the deletion 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 &quot;clash with others&quot;
* 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
* ~~Change affects total project duration~~
* Available start/finish dates limited by relations
* see comment #3 for more concerns
* **\[open\]** Begin of the insertionNeed to check ifEnd of the insertion Begin of the deletion How does theEnd of the deletion focus behaviour Begin of the insertionas described makes sense in practice.End of the insertion Begin of the deletion work together with the date selection mechanism? See bottom part of comment #3End of the deletion
* **\[open\]** 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.

### 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>.