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 Begin of the insertionis beingEnd of the insertion Begin of the deletion will beEnd of the deletion 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 Begin of the insertiondescribes**End of the insertion Begin of the deletion will be updated for the following stage to describe**End of the deletion _**only**_ **additions and changes Begin of the insertionfor 12.3.**End of the insertion Begin of the deletion (for 12.3).**End of the deletion

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

### **Acceptance criteria**

Begin of the deletion Clicking on a date field displays the date picker drop modal:

#### Overview

End of the deletion The date picker Begin of the insertionextendsEnd of the insertion Begin of the deletion 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 (withEnd of the deletion the Begin of the deletion option to include non-working days)**

#### Default behaviour

When theEnd of the deletion date picker Begin of the insertionfrom 12.2 with these new features:End of the insertion Begin of the deletion is opened, a field is always in focus by default.End of the deletion

* Begin of the insertionA newEnd of the insertion Begin of the deletion 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.
* When opened by clicking on theEnd of the deletion &quot;duration&quot; Begin of the deletion field, the duration will be in focus by default.

When the unified dateEnd of the deletion field Begin of the insertionnextEnd of the insertion Begin of the deletion 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 priorEnd of the deletion to Begin of the deletion that initially selected date, that second date will now be consideredEnd of the deletion the Begin of the deletion start date, and the initial one theEnd of the deletion finish Begin of the insertiondate.End of the insertion Begin of the deletion 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)End of the deletion
* Begin of the insertionNon-working days taken into account (not includedEnd of the insertion Begin of the deletion It consists of:
* an icon
* two-line message, the firstEnd of the deletion in Begin of the insertioncalculationEnd of the insertion Begin of the deletion bold
* a &quot;GANTT preview&quot; 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).
* _**Open:** We might have to show some kindEnd of the deletion of Begin of the insertionduration) whenEnd of the insertion Begin of the deletion 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 (andEnd of the deletion date Begin of the insertionranges include them. In other words, these daysEnd of the insertion Begin of the deletion input is disabled in regular mode)
* **Warning:** Manual scheduling is enabled so all existing work package relationsEnd of the deletion are Begin of the insertionskipped over.End of the insertion Begin of the deletion 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 &quot;manual scheduling&quot; is checked.End of the deletion
* A Begin of the insertioncheckbox to include non-working daysEnd of the insertion Begin of the deletion helper iconEnd of the deletion in Begin of the insertiondate ranges (and thus also duration)End of the insertion Begin of the deletion the label will display a tooltip with this text on hover :
* &quot;Regular scheduling takes relations and project constraints into consideration, manual will ignore them.&quot;End of the deletion

#### Begin of the deletion Start Date, Finish Date andEnd of the deletion Duration

* There are Begin of the insertionaEnd of the insertion Begin of the deletion three fields that use theEnd of the deletion new Begin of the insertion&quot;Duration&quot;End of the insertion Begin of the deletion textEnd of the deletion field Begin of the deletion components:
* Start date
* Finish date
* Duration (new element)
* The user is ableEnd of the deletion to Begin of the deletion input dates either:
* by clicking onEnd of the deletion the Begin of the insertionright ofEnd of the insertion Begin of the deletion dates on the mini-calendar (in the date picker modal)
* by inputting the dates manually in the text fields for start date,End of the deletion finish date Begin of the deletion 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.End of the deletion
* Begin of the deletion On focus, the field is outlined in blue (focus style).
* End of the deletion The Begin of the deletion 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).
* TheEnd of the deletion visual format for displaying Begin of the deletion dates depends on the locale settings.
* 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;)
* The visual format for displayingEnd of the deletion duration is &quot;4 days&quot;.
* When in focus, this retains only the numerical value &quot;4&quot;.
* If the user types &quot;4 days&quot; (or &quot;4 Tage&quot;, &quot;4 jours&quot;...), all information apart from the number is ignored. It should be considered the same as typing &quot;4&quot;.
* On blur (remove focus), the Begin of the insertionlocalised word  forEnd of the insertion Begin of the deletion local unit forEnd of the deletion &quot;days&quot; is added again.

#### Begin of the insertionMiniEnd of the insertion Begin of the deletion The two-month mini-calendar

The miniEnd of the deletion calendar Begin of the insertionupdatesEnd of the insertion Begin of the deletion allows the user to select start and end dates:End of the deletion

Begin of the deletion * Two months are displayed (current and next month)
* 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).
* 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 &quot;select&quot; 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 &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).
* **\[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).
* End of the deletion Each calendar day Begin of the deletion canEnd of the deletion has Begin of the insertiona few new states:

End of the insertion Begin of the deletion multiple states depending on what kind of day it is:
End of the deletion * **When enabled:** Begin of the insertion
End of the insertion Begin of the deletion
End of the deletion * Begin of the deletion 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)
* End of the deletion In the selected range but a non-working day (blue _feedback/info/dark_ text on a _gray#6_ background) Begin of the insertion
End of the insertion Begin of the deletion
End of the deletion * **When disabled:** Begin of the insertion
End of the insertion Begin of the deletion
End of the deletion * Begin of the deletion 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)
* End of the deletion In the selected range but a non-working day Begin of the insertion(_gray#5_End of the insertion Begin of the deletion (_gray#6_End of the deletion on a Begin of the insertion_gray#6_End of the insertion Begin of the deletion _gray#4_End of the deletion background)

<figure class="image op-uc-figure" Begin of the insertionstyle="width:75%;"><divEnd of the insertion Begin of the deletion style="width:50%;"><divEnd of the deletion class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/34054/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/29238/content"></div><figcaption class="op-uc-figure--description">Date picker mini calendar when dates are enabled/clickable</figcaption></figure>End of the deletion

<figure class="image op-uc-figure" Begin of the insertionstyle="width:75%;"><divEnd of the insertion Begin of the deletion style="width:50%;"><divEnd of the deletion class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/34055/content"></div></figure>End of the insertion Begin of the deletion 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>End of the deletion

#### Begin of the insertion&quot;IncludeEnd of the insertion Begin of the deletion Action bar with &quot;includeEnd of the deletion non-working days&quot; Begin of the insertioncheckboxEnd of the insertion Begin of the deletion optionEnd of the deletion

* The action bar has Begin of the insertiona new checkbox on the left edge:End of the insertion Begin of the deletion three actions:End of the deletion
* **Include non-working days Begin of the insertioncheckbox:** checkingEnd of the insertion Begin of the deletion checkbox**, whichEnd of the deletion turns non-working days into regular days (and therefore including them even when finish date is derived using Begin of the insertionduration).End of the insertion Begin of the deletion duration)End of the deletion
* Begin of the insertionThis removes the grey background on non-working days; all days now look the same as a &quot;normal&quot; day.End of the insertion Begin of the deletion **Cancel button** (outlined/main), discards changesEnd of the deletion
* Begin of the insertionUnchecking 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 theEnd of the insertion Begin of the deletion **Apply button** (filled/main), applies changes

### Anatomy

TheEnd of the deletion date Begin of the insertionranges previously spanned one weekend)
* If the user unchecks this box, the same will happen; start and end dates are preserved and durationEnd of the insertion Begin of the deletion pickerEnd of the deletion is Begin of the insertionupdated.
* If a work package only has one setEnd of the insertion Begin of the deletion built outEnd of the deletion of Begin of the insertiondate 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 accountEnd of the insertion Begin of the deletion several components already describedEnd of the deletion in Begin of the insertionpreviously created work packages).
* ForEnd of the insertion Begin of the deletion our design system, and someEnd of the deletion new Begin of the insertionwork packages, this button will remain unchecked and non-working days will not be taken into account when calculating duration by default.End of the insertion Begin of the deletion ones.End of the deletion

Begin of the deletion <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>

End of the deletion ### Visuals

**Regular scheduling, working days only (default):**

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

**Regular scheduling, include non-working days:**

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

Begin of the insertion**Automatic scheduling (mini calendar disabled):**End of the insertion Begin of the deletion **Manual scheduling, working days only:**End of the deletion

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

**Manual scheduling, Begin of the insertionworking days only, with relations:**End of the insertion Begin of the deletion include non-working days:**End of the deletion

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

Begin of the insertion### Simple date picker

The simple date picker (for work packagesEnd of the insertion Begin of the deletion **Automatically scheduled, modification blockedEnd of the deletion with Begin of the insertiononly one date, like milesstones) still does not have a duration field, but now has the &quot;Include non-working days&quot; option:End of the insertion Begin of the deletion info banner**
_Info banner: Dates are derived from relations:_End of the deletion

Begin of the insertion**Simple date pickerEnd of the insertion Begin of the deletion <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 schedulingEnd of the deletion with Begin of the insertionthe include non-working days option:**End of the insertion Begin of the deletion warning banner**
_Warning banner: relations are ignored:_End of the deletion

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

Begin of the insertion### Date-only date pickerEnd of the insertion Begin of the deletion **Regular scheduling with info banner**
_Info banner: Changing dates will affect project duration:_End of the deletion

Begin of the insertionThe 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:

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

Begin of the insertion### Mobile date picker

In the mobile version:

* the start/finishEnd of the insertion Begin of the deletion **Regular scheduling with warning banner**
_Warning banner: ChangingEnd of the deletion dates Begin of the insertioncontinue to each take 50%End of the insertion Begin of the deletion will affect datesEnd of the deletion of Begin of the insertionthe width and the duration field goes in a new line.
* the &quot;include non-working days&quot; goes in a new line before the action buttons.End of the insertion Begin of the deletion related packages (following or preceeding):_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/34062/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/30309/content"></div></figure>End of the deletion

Begin of the insertion**Mobile simple date picker:**End of the insertion Begin of the deletion **Manual scheduling with warning banner**
_Warning banner: available start and finish dates are limited by relations (warning because dates might have changed)_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/34063/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/30310/content"></div></figure>End of the deletion

Begin of the insertion**Mobile date-onlyEnd of the insertion Begin of the deletion ###

### Simple Date Picker

There will also be a &quot;simple&quot; dateEnd of the deletion picker Begin of the insertion(used outside ofEnd of the insertion Begin of the deletion with only a single _date_ field and a single calendar. AEnd of the deletion work Begin of the insertionpackages):**End of the insertion Begin of the deletion package describing this will come shortly, but a preview exists:End of the deletion

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

### Figma prototypes

Begin of the insertionPlease keepEnd of the insertion Begin of the deletion All states of the date picker and mini calendar are illustratedEnd of the deletion in Begin of the insertionmind thatEnd of the insertion Begin of the deletion theEnd of the deletion Figma Begin of the insertionpage has a &quot;(12.3)End of the insertion Begin of the deletion prototype, alongEnd of the deletion with Begin of the insertionDuration&quot; inEnd of the insertion the Begin of the insertiontitle (the 12.2 page looks very similar, so do double-check). When in doubt, follow this link:End of the insertion Begin of the deletion scenarios described [in the duration epic](https://community.openproject.org/projects/openproject/work_packages/31992/activity):End of the deletion

Begin of the insertionhttps://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/?node-id=1806%3A50629End of the insertion Begin of the deletion [https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/?node-id=1082%3A15447](https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/?node-id=1082%3A15447)End of the deletion