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" Begin of the insertionstyle="width:460px;" src="/api/v3/attachments/37914/content">End of the insertion Begin of the deletion src="/api/v3/attachments/37492/content">End of the deletion

### **Acceptance criteria**

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

* Begin of the insertionThe &quot;Manual scheduling&quot; checkbox is now a toggle with title &quot;Scheduling&quot; andn two options:
* &quot;Default&quot;
* &quot;Manual&quot;
* There is aEnd of the insertion Begin of the deletion AEnd of the deletion new Begin of the insertiontoggle set title &quot;Working days&quot; with two options
* &quot;Work week&quot;
* &quot;Include weekends&quot; End of the insertion Begin of the deletion &quot;duration&quot; field next to the finish date.End of the deletion
* Begin of the insertionBy default, the togglesEnd of the insertion Begin of the deletion Non-working days taken into account (not included in calculation of duration) when date ranges include them. In other words, these daysEnd of the deletion are Begin of the insertionset to &quot;Default&quot; (scheduling and &quot;Work week&quot; (Working days).
* Exceptions are described below.End of the insertion Begin of the deletion skipped over.End of the deletion
* A Begin of the insertionnew &quot;Duration&quot; field nextEnd of the insertion Begin of the deletion checkboxEnd of the deletion to Begin of the insertionthe finish date.End of the insertion Begin of the deletion include non-working days in date ranges (and thus also duration)End of the deletion

#### Duration

* There are a 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_AddedEnd of the insertion Begin of the deletion AddedEnd of the deletion 16 August after discussion with <mention class="mention" data-id="39106" data-type="user" data-text="@Henriette Darge">@Henriette Darge</mention> and <mention class="mention" data-id="9177" data-type="user" data-text="@Oliver Günther">@Oliver Begin of the insertionGünther</mention>:_End of the insertion Begin of the deletion Günther</mention>:End of the deletion

Normally, when clicking on individual dates in the mini calendar, the active field switches between the start date and the finish date, with each click. With the introduction of Duraiton, this behaviour is maintained, with these particularities:

* 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 duration, and only changes:
* 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 integer:
* If no dates are entered, there is no impact on the mini-calendar.
* If both dates are present, the finish date is updated automatically based on the input (preserved, or shifted into the past or the future)
* If only a start date was present, a finish date is now derived.
* If only a finish date was present, a start date is now derived.
* When the user is in the duration field and clicks on a date in the mini calendar:
* If the duration field has a value, the clicked date becomes the the start date, the finish date is derived from the duration, and the active field moves to the finish date (same as when a date is clicked on when the start date is active).
* A click on a second date then modifies the finish date (and can affect duration).
* The active field shifts again 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).
* The active field shifts again back to the start date.

#### 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 insertionThe &quot;WorkingEnd of the insertion Begin of the deletion &quot;Include non-workingEnd of the deletion days&quot; Begin of the insertiontoggle setEnd of the insertion Begin of the deletion checkboxEnd of the deletion

* The action bar has a new Begin of the insertiontoggle set:End of the insertion Begin of the deletion checkbox on the left edge:End of the deletion
* Begin of the insertionBy default, &quot;Work week&quot; is selected andEnd of the insertion Begin of the deletion **IncludeEnd of the deletion non-working Begin of the insertiondays, as defined in the admin settings, are not included in calculation of duration (when date ranges include them). In other words, theseEnd of the insertion days Begin of the insertionare skipped over. 
* Switching the toggle to &quot;Include weekends&quot; then overrides admin settings and includesEnd of the insertion Begin of the deletion checkbox:** checking turnsEnd of the deletion non-working days Begin of the insertionin the calculation, and also makes these theseEnd of the insertion Begin of the deletion into regularEnd of the deletion days Begin of the insertionclickable.
End of the insertion Begin of the deletion (and therefore including them even when finish date is derived using duration).
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 * Begin of the insertionSwitchingEnd of the insertion Begin of the deletion UncheckingEnd of the deletion the Begin of the insertiontoggle to &quot;Work week&quot;End of the insertion box reverses this Begin of the insertionandEnd of the insertion Begin of the deletion (andEnd of the deletion non-working days become grey again and are skipped in Begin of the insertioncalculations.
* More advanced scenarios are described in the scenarios work package here: <mention class="mention" data-id="43539" data-type="work_package" data-text="#43539">#43539</mention>.End of the insertion Begin of the deletion calculations).End of the deletion
* If a work package already has start and end dates (and thus also duration) and the Begin of the insertionchanges to &quot;Include weekends&quot;,End of the insertion Begin of the deletion user enables this checkbox,End of the deletion the duration is preserved the dates are updated to include days that were previously Begin of the insertionskipped:End of the insertion Begin of the deletion skipped (the weekends, primarily).End of the deletion
* **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). Begin of the insertionNowEnd of the insertion Begin of the deletion Now,End of the deletion that Begin of the insertionweekendEnd of the insertion Begin of the deletion non-workingEnd of the deletion days are included, the finish date is now Sunday, and the duration remains 4 days.
* If the user goes back to working days only (from previously Begin of the insertionincluding weekends)End of the insertion Begin of the deletion included non-working days),End of the deletion the duration is once again maintained, but the finish date is pushed to now skip over the non-working days.
* **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:** Begin of the insertionIn &quot;include weekends&quot; mode, aEnd of the insertion Begin of the deletion AEnd of the deletion user changes Begin of the deletion thenEnd of the deletion the start date such that the work package now starts on Begin of the insertiona weekend (Saturday),End of the insertion Begin of the deletion normally non-working day (Saturday). The duration remains 4 days,End of the deletion with a finish date of Tuesday. Begin of the insertionGoing back to &quot;work week&quot;End of the insertion Begin of the deletion Deactivating this optionEnd of the deletion will now also Begin of the insertionpushEnd of the insertion Begin of the deletion moveEnd of the deletion the start date to Monday, with a finish date of Thursday Begin of the insertion(andEnd of the insertion Begin of the deletion (again, toEnd of the deletion maintain Begin of the insertionthe duration of 4 days).End of the insertion Begin of the deletion duration).End of the deletion
* If a work package only has one set of date information (just start date, just end date, or just duration), Begin of the insertionchangingEnd of the insertion Begin of the deletion clickingEnd of the deletion this Begin of the insertiontoggleEnd of the insertion Begin of the deletion buttonEnd of the deletion will Begin of the insertionnormallyEnd of the insertion not affect any of the values until a second piece of information is also input (with one Begin of the insertionexception described below).End of the insertion Begin of the deletion exception).End of the deletion
* **For example,** for a work package with a start date only (so no duration), Begin of the insertionchanging to the &quot;Include weekends&quot; modeEnd of the insertion Begin of the deletion clicking thisEnd of the deletion will Begin of the deletion immediatelyEnd of the deletion do nothing. However, if a second date is clicked, the duration calculated will now include Begin of the insertionthe admin-configuredEnd of the insertion non-working days.
* **Exception:** Begin of the insertionWhen &quot;Include weekends&quot; mode enabledEnd of the insertion Begin of the deletion when the option is enabled,End of the deletion and the Begin of the insertionsingleEnd of the insertion Begin of the deletion oneEnd of the deletion date Begin of the insertion(start _or_ finish)End of the insertion is on a Begin of the insertiondefinedEnd of the insertion Begin of the deletion normallyEnd of the deletion non-working day (Saturday), then Begin of the insertionswitching back to &quot;Work week&quot;End of the insertion Begin of the deletion disabling this optionEnd of the deletion has to move that date to the first available working day (in the Begin of the insertionfuture). InEnd of the insertion Begin of the deletion future); inEnd of the deletion this case, it would be Monday.
* When migrating to 12.3, when the feature is introduced, all previous work packages will Begin of the insertionbe toggled to &quot;Include weekends&quot;End of the insertion Begin of the deletion have this checkbox enabledEnd of the deletion (since non-working days will not have been taken into account in previously created work packages).
* For new work packages, Begin of the insertionby default, the toggleEnd of the insertion Begin of the deletion this buttonEnd of the deletion will Begin of the insertionbe set to &quot;Work week&quot;End of the insertion Begin of the deletion remain uncheckedEnd of the deletion and non-working days will not be taken into account when calculating duration by default. Begin of the insertion
* If the admin setting &quot;User current date as start date for new work packages&quot; is enabled, and a work package is created on a weekend, the 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 is in terms of including non-working days. (Creating a work package on a weekend does not necessarily mean that it will be scheduled to start the very day; automatically selecting this means we run the risk that the is not aware of the &#39;Include weekends&#39; mode automatically changed on their behalf, which would affect scheduling even if they select a start date that is otherwise a working day).
* If the user _meant_ for the work package to start on a weekend _and_ have its duration span weekends, they can the toggle to explicitcly enable this mode.End of the insertion

#### Logical changes

* Changing either a date, the duration or the non-working days will have automatic effects on the other fields.The 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" Begin of the insertionsrc="/api/v3/attachments/37915/content">End of the insertion Begin of the deletion src="/api/v3/attachments/37495/content">End of the deletion

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

<img class="op-uc-image op-uc-image_inline" Begin of the insertionsrc="/api/v3/attachments/37917/content">End of the insertion Begin of the deletion src="/api/v3/attachments/37496/content">End of the deletion

Begin of the insertion**Banner info - AutomaticEnd of the insertion Begin of the deletion **AutomaticEnd of the deletion scheduling Begin of the insertion(dates derived from children, miniEnd of the insertion Begin of the deletion (miniEnd of the deletion calendar disabled):**

<img class="op-uc-image op-uc-image_inline" Begin of the insertionsrc="/api/v3/attachments/37918/content">End of the insertion Begin of the deletion src="/api/v3/attachments/37497/content">End of the deletion

Begin of the insertion**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 byEnd of the insertion Begin of the deletion **Manual scheduling, working days only, withEnd of the deletion relations:**

<img class="op-uc-image op-uc-image_inline" Begin of the insertionsrc="/api/v3/attachments/37927/content">End of the insertion Begin of the deletion src="/api/v3/attachments/37498/content">End of the deletion

Begin of the insertion**Banner warning - Dates will affect related WPs:**

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

End of the insertion ### Begin of the insertionOne-dayEnd of the insertion Begin of the deletion SimpleEnd of the deletion date picker

The Begin of the insertionone-dayEnd of the insertion Begin of the deletion simpleEnd of the deletion date picker Begin of the insertion(used for Milestones, for example)End of the insertion Begin of the deletion (for work packages with only one date, like milesstones) stillEnd of the deletion does not have a duration Begin of the insertionfield:End of the insertion Begin of the deletion field, but now has the &quot;Include non-working days&quot; option:End of the deletion

Begin of the insertion**One-dayEnd of the insertion Begin of the deletion **SimpleEnd of the deletion date Begin of the insertionpicker:**

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

**One-day dateEnd of the insertion picker with Begin of the insertiona banner:**End of the insertion Begin of the deletion the include non-working days option:**End of the deletion

Begin of the insertion**<imgEnd of the insertion Begin of the deletion <imgEnd of the deletion class="op-uc-image op-uc-image_inline" Begin of the insertionsrc="/api/v3/attachments/37922/content">**End of the insertion Begin of the deletion src="/api/v3/attachments/37499/content">End of the deletion

### Date-only date picker

Begin of the insertionExtracted,End of the insertion Begin of the deletion The 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:

**\[Work in progress, screens belowEnd of the deletion will Begin of the deletion soonEnd of the deletion be Begin of the insertionspecified in <mention class="mention" data-id="42358" data-type="work_package" data-text="#42358">#42358</mention>.End of the insertion Begin of the deletion updated\]**End of the deletion

### Mobile date picker

Begin of the deletion **\[Work in progress, screens below will soon be updated\]**

End of the deletion In the mobile version:

* Begin of the insertionThe _Scheduling_ and _Working days_ toggle sets take a line each.
* End of the insertion the start/finish Begin of the insertiondate fieldsEnd of the insertion Begin of the deletion datesEnd of the deletion continue to each take 50% of the width Begin of the deletion and the duration field goes in a new line.End of the deletion
* the Begin of the insertionduration field is moved toEnd of the insertion Begin of the deletion &quot;include non-working days&quot; goes inEnd of the deletion a new line Begin of the deletion before the action buttons.End of the deletion

Begin of the insertion**Mobile regular:**End 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/34062/content"></div></figure>End of the deletion

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

End of the insertion **Mobile Begin of the insertionwith banner warning (manual scheduling with relations):**End of the insertion Begin of the deletion simple date picker:**End of the deletion

Begin of the insertion**<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37925/content">**End 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/34063/content"></div></figure>End of the deletion

**Mobile Begin of the insertionone-day dateEnd of the insertion Begin of the deletion date-onlyEnd of the deletion picker Begin of the insertion(Milestones):**End of the insertion Begin of the deletion (used outside of work packages):**End of the deletion

Begin of the insertion<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37926/content">End 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/34064/content"></div></figure>End of the deletion

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