This sub-feature is part of the epic related to the duration feature (<mention class="mention" data-id="31992" data-type="work_package" data-text="#31992">#31992</mention>) and describes the functioning of the new date picker.

**Please note that the date picker is being implemented in multiple stages. The first version, for 12.2, is described here:** [**#42047**](https://community.openproject.org/work_packages/42047) **(date picker excluding duration and non-working days).**

**This ticket describes** _**only**_ **additions and changes for 12.3.**

<img class="op-uc-image op-uc-image_inline" style="width:460px;" src="/api/v3/attachments/37914/content">

### Begin of the insertion**Base AcceptanceEnd of the insertion Begin of the deletion **AcceptanceEnd of the deletion criteria**

The date picker extends the date picker from 12.2 with these new features:

* The &quot;Manual scheduling&quot; checkbox is now a toggle with title &quot;Scheduling&quot; Begin of the insertionandEnd of the insertion Begin of the deletion andnEnd of the deletion two options:
* &quot;Default&quot; Begin of the insertion(default)End of the insertion
* &quot;Manual&quot;
* There is a new toggle set title &quot;Working days&quot; with two options
* &quot;Work week&quot; Begin of the insertion(default)End of the insertion
* &quot;Include Begin of the insertionweekends&quot;End of the insertion Begin of the deletion weekends&quot; End of the deletion
* Begin of the deletion By default, the toggles are set to &quot;Default&quot; (scheduling and &quot;Work week&quot; (Working days).
* Exceptions are described below.
* End of the deletion A new &quot;Duration&quot; Begin of the insertionfield.End of the insertion Begin of the deletion field next to the finish date.End of the deletion

Begin of the insertion###End of the insertion Begin of the deletion ####End of the deletion Duration Begin of the insertionfield (basic characteristics)End of the insertion

* There Begin of the insertionisEnd of the insertion Begin of the deletion are aEnd of the deletion new &quot;Duration&quot; field to the right of finish date
* The visual format for displaying duration is &quot;4 days&quot;.
* When in focus, this retains only the numerical value &quot;4&quot;.
* The field only accepts integers when in focus. On blur, it goes back to the normal display with the units (&quot;n days&quot;, &quot;n Tage&quot;, &quot;n jours&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 localised word  for &quot;days&quot; is added again.

Begin of the insertion### How changing duration should affect startEnd of the insertion Begin of the deletion _Added 16 August after discussion with <mention class="mention" data-id="39106" data-type="user" data-text="@Henriette Darge">@Henriette Darge</mention>End of the deletion and Begin of the insertionfinish datesEnd of the insertion Begin of the deletion <mention class="mention" data-id="9177" data-type="user" data-text="@Oliver Günther">@Oliver Günther</mention>:_End of the deletion

Normally, when clicking on individual dates in the mini calendar, the active field switches between the start Begin of the deletion date andEnd of the deletion the finish Begin of the insertiondates,End of the insertion Begin of the deletion date,End of the deletion with each click. With the introduction of Begin of the insertionDuration,End of the insertion Begin of the deletion Duraiton,End of the deletion this behaviour is maintained, Begin of the insertionbutEnd of the insertion with these Begin of the insertionspecificities:End of the insertion Begin of the deletion particularities:End of the deletion

* When the Duration field is clicked on (for manual input of duration), it is considered &quot;active&quot; (much like the start and finish date fields).
* Clicking outside of the duration field (blur) does not change the active field; it remains Begin of the insertionduration. It looses the focus only:End of the insertion Begin of the deletion duration, and only changes:End of the deletion
* with a click on the start or finish date fields
* with a click on a date in the mini calendar
* when the modal is closed
* When a user modifies the duration Begin of the insertioninteger by typing:End of the insertion Begin of the deletion integer:End of the deletion
* If no dates are entered, there is no Begin of the insertionvisualEnd of the insertion impact on the mini-calendar.
* If both dates are present, the finish date is Begin of the insertionchangedEnd of the insertion Begin of the deletion updatedEnd of the deletion automatically based on the Begin of the insertionnew durationEnd of the insertion input Begin of the deletion (preserved, or shifted into the past or the future)End of the deletion
* If only Begin of the insertiontheEnd of the insertion Begin of the deletion aEnd of the deletion start date was present, Begin of the insertiontheEnd of the insertion Begin of the deletion aEnd of the deletion finish date is now Begin of the insertionderived based on duration.End of the insertion Begin of the deletion derived.End of the deletion
* If only Begin of the insertiontheEnd of the insertion Begin of the deletion aEnd of the deletion finish date was present, Begin of the insertiontheEnd of the insertion Begin of the deletion aEnd of the deletion start date is now Begin of the insertionderived based on duration.End of the insertion Begin of the deletion derived.End of the deletion
* When the Begin of the deletion user is in theEnd of the deletion duration field Begin of the insertionis activeEnd of the insertion and Begin of the insertionthe userEnd of the insertion clicks on a date in the mini calendar:
* If the duration field has a value, the clicked date becomes the the start Begin of the insertiondate andEnd of the insertion Begin of the deletion date,End of the deletion the finish date is Begin of the insertionthenEnd of the insertion derived from the Begin of the insertionduration that was present. The ctiveEnd of the insertion Begin of the deletion duration, and the activeEnd of the deletion field moves to the finish Begin of the insertiondate:End of the insertion Begin of the deletion date (same as when a date is clicked on when the start date is active).End of the deletion
* A click on a second date then modifies the finish Begin of the insertiondate. This second clickEnd of the insertion Begin of the deletion date (andEnd of the deletion can affect Begin of the insertionduration.End of the insertion Begin of the deletion duration).
* End of the deletion The active field Begin of the insertionthenEnd of the insertion shifts Begin of the deletion againEnd of the deletion back to the start date.
* If the duration field has no value, the clicked date becomes the start date, no finish date is set but the active field becomes the finish date.
* A click on a second date modifies the finish date (which derives duration too). Begin of the deletion
* End of the deletion The active field shifts again back to the start date. Begin of the insertion
* For a work package that has a start date, a finish date and thus also a duration, removing one of the dates (start or finish) will also remove the duration.
* Of course, clicking on a second date (or manually adding a second date) will add a new duration and the duration will be changed and all three fields will now be complete.
* This also means that it is not possible to conserve duration when deleting dates, since deleting one date will also delete duration. To remove start and finish dates from a work package that already has these fields but keep the duration, the duration will then have to be re-entered after removing the dates.
* It is not possible to remove duration from a field that has start and end dates. (For example, if the user clears the text field manually, the value will automatically be re-entered on blur based on start and finish dates).End of the insertion

Begin of the insertion###End of the insertion Begin of the deletion ####End of the deletion Mini calendar updates

Each calendar day has a few new states:

* **When enabled:**
* In the selected range but a non-working day (blue _feedback/info/dark_ text on a _gray#6_ background)
* **When disabled:**
* In the selected range but a non-working day (_gray#5_ on a _gray#6_ background)

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37493/content">   <img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37494/content">

Begin of the insertion###End of the insertion Begin of the deletion ####End of the deletion The &quot;Working days&quot; toggle set

Begin of the deletion * End of the deletion The action bar has a new toggle set: Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * By default, &quot;Work week&quot; is selected and non-working days, as defined in the admin settings, are not included in calculation of duration (when date ranges include them). In other words, these days are skipped Begin of the insertionover.End of the insertion Begin of the deletion over. End of the deletion
* Begin of the insertionThese non-working days are also non-clickable on the mini calendar.
* End of the insertion Switching the toggle to &quot;Include weekends&quot; Begin of the deletion thenEnd of the deletion overrides Begin of the insertionthisEnd of the insertion Begin of the deletion admin settingsEnd of the deletion and includes non-working days in the Begin of the insertioncalculation. It  alsoEnd of the insertion Begin of the deletion calculation, and alsoEnd of the deletion makes these Begin of the insertionthe previously disabledEnd of the insertion Begin of the deletion theseEnd of the deletion days clickable. Begin of the insertion
End of the insertion Begin of the deletion
End of the deletion * This removes the grey background on non-working days; all days now look the same as a &quot;normal&quot; day. Begin of the insertion
End of the insertion Begin of the deletion
End of the deletion * Switching the toggle to &quot;Work week&quot; box reverses this and non-working days become grey again and are skipped in calculations. Begin of the insertion
End of the insertion Begin of the deletion
End of the deletion * Begin of the insertionPlease refer toEnd of the insertion Begin of the deletion More advanced scenarios are described inEnd of the deletion the Begin of the insertiontestingEnd of the insertion scenarios Begin of the insertionfor details on expected behaviour in a variety of different cases:End of the insertion Begin of the deletion work package here:End of the deletion <mention class="mention" data-id="43539" data-type="work_package" data-text="#43539">#43539</mention>. Begin of the insertion

### &quot;Working days&quot; and its relation to the start date, finish date and duration

End of the insertion Begin of the deletion
End of the deletion * If a work package already has start and end Begin of the insertiondates, andEnd of the insertion Begin of the deletion dates (andEnd of the deletion thus also Begin of the insertionduration,End of the insertion Begin of the deletion duration)End of the deletion and the Begin of the insertionuser enablesEnd of the insertion Begin of the deletion changes toEnd of the deletion &quot;Include weekends&quot;, the duration is preserved Begin of the insertionandEnd of the insertion the dates are updated to include days that were previously Begin of the insertionskipped.End of the insertion Begin of the deletion skipped:
* **Example:** A work package with a start date on a Thursday, and with a duration of 4 days, had a finish date of Tuesday (since Saturday and Sunday were skipped). Now that weekend days are included, the finish date is now Sunday, and the duration remains 4 days.End of the deletion
* If the user goes back to working days only (from previously including weekends) the duration is once again Begin of the insertionmaintainedEnd of the insertion Begin of the deletion maintained,End of the deletion but the finish date is pushed to now skip over the non-working days. Begin of the insertion
End of the insertion Begin of the deletion
End of the deletion * Begin of the insertionWhen &quot;IncludeEnd of the insertion Begin of the deletion **Example:** In the same example as before, the work package now once again starts on a Thursday, finishes on a Tuesday and has a duration of 4 days.
* **Example 2:** In &quot;includeEnd of the deletion weekends&quot; Begin of the insertionis enabled andEnd of the insertion Begin of the deletion mode, a user changesEnd of the deletion the start date Begin of the insertionisEnd of the insertion Begin of the deletion such that the work package now starts onEnd of the deletion a Begin of the insertionnormally non-working day (eg. Saturday), goingEnd of the insertion Begin of the deletion weekend (Saturday), with a finish date of Tuesday. GoingEnd of the deletion back to Begin of the insertion&quot;WorkEnd of the insertion Begin of the deletion &quot;workEnd of the deletion week&quot; will Begin of the deletion nowEnd of the deletion also push Begin of the insertionthisEnd of the insertion Begin of the deletion theEnd of the deletion start date to Begin of the insertionthe first available working day (eg. Monday), moving also theEnd of the insertion Begin of the deletion Monday, with aEnd of the deletion finish date Begin of the insertionif necessary toEnd of the insertion Begin of the deletion of Thursday (andEnd of the deletion maintain Begin of the insertionduration.End of the insertion Begin of the deletion the duration of 4 days).End of the deletion
* If a work package only has one set of date information (just start date, just end date, or just duration), changing this toggle will normally not affect any of the values until a second piece of information is also Begin of the insertioninput.End of the insertion Begin of the deletion input (with one exception described below).End of the deletion
* Begin of the deletion **For example,** for a work package with a start date only (so no duration), changing to the &quot;Include weekends&quot; mode will do nothing. However, if a second date is clicked, the duration calculated will now include the admin-configured non-working days.
* End of the deletion **Exception:** When &quot;Include weekends&quot; mode enabled and the single date (start _or_ finish) is on a Begin of the insertionnormallyEnd of the insertion Begin of the deletion definedEnd of the deletion non-working day Begin of the insertion(eg. Saturday),End of the insertion Begin of the deletion (Saturday),End of the deletion then switching back to &quot;Work week&quot; has to move that date to the first available working day (in the Begin of the insertionfuture, Monday in our example).

### Defaults and instance settings

* New work packages have an empty (not set) default duration.
* For new work packages, by default, the toggle willEnd of the insertion Begin of the deletion future). In this case, it wouldEnd of the deletion be Begin of the insertionset to &quot;Work week&quot; and non-working days will not be taken into account when calculating duration by default.End of the insertion Begin of the deletion Monday.End of the deletion
* When migrating to 12.3, when the feature is introduced, all previous work packages will be toggled to &quot;Include weekends&quot; (since non-working days will not have been taken into account in previously created work packages).
* Begin of the deletion For new work packages, by default, the toggle will be set to &quot;Work week&quot; and non-working days will not be taken into account when calculating duration by default.
* End of the deletion If the admin setting &quot;User current date as start date for new work packages&quot; is Begin of the insertionenabledEnd of the insertion Begin of the deletion enabled,End of the deletion and a work package is created on a Begin of the insertionweekend (and &quot;include weekends&quot; is not manually enabled byEnd of the insertion Begin of the deletion weekend,End of the deletion the Begin of the insertionuser, so by default &quot;work week&quot; is selected), theEnd of the insertion start date will be set to the first available _working_ day (and not the weekend day).
* This is because the spirit of that admin setting is to simplify the creation of new work packages by not forcing the user to have to select a date every single time; this base default cannot make an assumption about the user&#39;s intention Begin of the insertion inEnd of the insertion Begin of the deletion is inEnd of the deletion terms of Begin of the insertionwanting to includeEnd of the insertion Begin of the deletion includingEnd of the deletion non-working Begin of the insertiondays or not. CreatingEnd of the insertion Begin of the deletion days. (CreatingEnd of the deletion a work package on a weekend does not necessarily mean that it will be scheduled to start Begin of the insertionthatEnd of the insertion Begin of the deletion theEnd of the deletion very day; Begin of the insertionifEnd of the insertion Begin of the deletion automatically selecting this meansEnd of the deletion we Begin of the insertionautomatically enableEnd of the insertion Begin of the deletion run the risk that the is not aware of theEnd of the deletion &#39;Include weekends&#39; mode Begin of the deletion automatically changedEnd of the deletion on their Begin of the insertionbehalf without their instruction, thisEnd of the insertion Begin of the deletion behalf, whichEnd of the deletion would affect scheduling even if they Begin of the insertionthenEnd of the insertion select a start date that is Begin of the insertionnormallyEnd of the insertion Begin of the deletion otherwiseEnd of the deletion a working day).
* If the user _meant_ for the work package to start on a weekend _and_ have its duration Begin of the insertionincludeEnd of the insertion Begin of the deletion spanEnd of the deletion weekends, they can the toggle to explicitcly enable this mode.

Begin of the insertion###End of the insertion Begin of the deletion ####End of the deletion Logical changes

* Changing either a date, the duration or the non-working days will have automatic effects on the other Begin of the insertionfields. TheEnd of the insertion Begin of the deletion fields.TheEnd of the deletion concrete logic is described in <mention class="mention" data-id="43539" data-type="work_package" data-text="#43539">#43539</mention>
* **Technical note:** Ideally this calculation is done by the backend, so that we don&#39;t have to repeat it in the frontend.

### Visuals

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

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37915/content">

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

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37917/content">

**Banner info - Automatic scheduling (dates derived from children, mini calendar disabled):**

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37918/content">

**Banner warning - Manual scheduling (with relations):**

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37920/content">

**Banner info - Dates limited by relations:**

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37927/content">

**Banner warning - Dates will affect related WPs:**

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37928/content">

### One-day date picker

The one-day date picker (used for Milestones, for example) does not have a duration field:

**One-day date picker:**

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37921/content">

**One-day date picker with a banner:**

**<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37922/content">**

### Date-only date picker

Extracted, will be specified in <mention class="mention" data-id="42358" data-type="work_package" data-text="#42358">#42358</mention>.

### Mobile date picker

In the mobile version:

* The _Scheduling_ and _Working days_ toggle sets take a line each.
* the start/finish date fields continue to each take 50% of the width
* the duration field is moved to a new line

**Mobile regular:**

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37923/content">

**Mobile with banner warning (manual scheduling with relations):**

**<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37925/content">**

**Mobile one-day date picker (Milestones):**

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37926/content">

### Figma prototypes

Please keep in mind that Figma page has a &quot;(12.3) with Duration&quot; in the title (the 12.2 page looks very similar, so do double-check). When in doubt, follow this link:

https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/?node-id=1806%3A50629