## Context

Begin of the insertionThis will be worked onEnd of the insertion Begin of the deletion **WorkEnd of the deletion in Begin of the insertionparallel with ##59845.End of the insertion Begin of the deletion progress, specs are being writen**End of the deletion

## Acceptance criteria

**Work package date picker**

Modify the current work Begin of the insertionpackage:End of the insertion Begin of the deletion package date picker:End of the deletion

* Begin of the insertionThere are now two different date selection modes available:

* single-date, whereEnd of the insertion Begin of the deletion ResizeEnd of the deletion the Begin of the insertionwork package has only aEnd of the insertion Begin of the deletion three fields (start date,End of the deletion finish date Begin of the insertionor a start date

* range, whereEnd of the insertion Begin of the deletion and duration) so they are allEnd of the deletion the Begin of the insertionwork package has both dates and a duration

End of the insertion Begin of the deletion same width.

End of the deletion * Begin of the insertionBy default, newEnd of the insertion Begin of the deletion NewEnd of the deletion work packages will Begin of the insertionstartEnd of the insertion Begin of the deletion openEnd of the deletion in Begin of the insertionsingle-date modeEnd of the insertion Begin of the deletion range mode,End of the deletion with Begin of the insertiononly the Finish date availableEnd of the insertion Begin of the deletion all three fields being available.End of the deletion

* If a work package has both start and finish dates, it will open in range mode as it does today.

* Begin of the insertionIn range mode,End of the insertion Begin of the deletion Clicking onEnd of the deletion the date Begin of the deletion field opens the dateEnd of the deletion picker Begin of the insertionbehaves exactlyEnd of the insertion Begin of the deletion with all three fields (start date, finish date, duration) visible, enabled and editable.

* It will behaveEnd of the deletion as it does Begin of the insertiontoday, as described in ##59845End of the insertion Begin of the deletion today (no change).

* The 'x' icon will continue to clear the value of the active field whilst keeping focus on it.End of the deletion

* If a work package has only one date, whether it be start of finish, it will open in single date mode:

* The other Begin of the insertiondateEnd of the insertion field Begin of the insertionisEnd of the insertion Begin of the deletion and the duration fields areEnd of the deletion replaced Begin of the insertionwith a button withEnd of the insertion Begin of the deletion by buttons (ofEnd of the deletion the same Begin of the insertionheight andEnd of the insertion width as the Begin of the insertioninput wouldEnd of the insertion Begin of the deletion fields)End of the deletion with a Begin of the deletion centeredEnd of the deletion + Begin of the insertiontrailing icon and the appropriate label ("Start date" or "Finish date")End of the insertion Begin of the deletion (add) icon.End of the deletion

* Begin of the insertionThe Duration field will be available but empty.

* End of the insertion Clicking on the Begin of the insertionadd dateEnd of the insertion Begin of the deletion + (add)End of the deletion button Begin of the insertionwill switchEnd of the insertion Begin of the deletion convertsEnd of the deletion the Begin of the deletion button into a field, and make it active. TheEnd of the deletion date picker Begin of the deletion now goesEnd of the deletion into range Begin of the insertionmode: it will replace the button with the appropriate input field and switch focus to it

End of the insertion Begin of the deletion mode.

End of the deletion * Begin of the insertionEnteringEnd of the insertion Begin of the deletion IfEnd of the deletion a Begin of the insertionduration will automatically switch from single to range mode, since the startEnd of the insertion date Begin of the insertioncan now be derived

* _\[open\] On blur? WheneverEnd of the insertion Begin of the deletion is added,End of the deletion the Begin of the insertioninputEnd of the insertion Begin of the deletion duration buttonsEnd of the deletion is Begin of the insertiontakenEnd of the insertion Begin of the deletion also automatically turnedEnd of the deletion into Begin of the insertionaccount._

* In single date mode, in the Flatpickr mini-calendar below, the selected date will be curved in all sides (vs.End of the insertion Begin of the deletion a field. _\[**Open**: immediately orEnd of the deletion on Begin of the insertiononly one end when in range mode)

End of the insertion Begin of the deletion blur after a value is input?\]_

End of the deletion * Begin of the insertionAn clear trailing action (X icon)End of the insertion Begin of the deletion If a durationEnd of the deletion is Begin of the insertionalways visible when either the Start or FinishEnd of the insertion Begin of the deletion added, the _other_End of the deletion date Begin of the insertionfieldsEnd of the insertion Begin of the deletion fieldEnd of the deletion is Begin of the insertionavailable

* _Note: Ideally, we would only show the clear buttonEnd of the insertion Begin of the deletion also automatically turned into a field. _\[**Open**: immediately orEnd of the deletion on Begin of the insertionfocus and only when thereEnd of the insertion Begin of the deletion blur after a valueEnd of the deletion is Begin of the insertiona value; however, Primer might not allow this behaviour out of the box_

End of the insertion Begin of the deletion input?\]_

End of the deletion * Begin of the insertionThe clear action clears the value but does not change the mode until save; theEnd of the insertion Begin of the deletion A rangeEnd of the deletion date picker Begin of the insertionremainsEnd of the insertion Begin of the deletion will remainEnd of the deletion in Begin of the insertionsingle date orEnd of the insertion range Begin of the insertionmode.

End of the insertion Begin of the deletion mode until it is closed by clicking on the _Save_ button:

End of the deletion * Begin of the insertionWhenEnd of the insertion Begin of the deletion If onlyEnd of the deletion a Begin of the deletion singleEnd of the deletion date Begin of the insertionpickerEnd of the insertion is Begin of the insertionsavedEnd of the insertion Begin of the deletion enteredEnd of the deletion in range mode, Begin of the insertionit will open in single-date mode if one or both dates were cleared.

* If one date is cleared andEnd of the insertion the date picker Begin of the insertionis saved, itEnd of the insertion will go into single date mode Begin of the insertionwith the _other_ date field active (the one with the value).End of the insertion Begin of the deletion on next opening.End of the deletion

* If Begin of the insertionbothEnd of the insertion Begin of the deletion twoEnd of the deletion dates are Begin of the insertioncleared and the date picker is saved, it will go into single-date mode with the Finish date active.

* _\[open\] If a work package isEnd of the insertion Begin of the deletion enteredEnd of the deletion in Begin of the insertionsingle dateEnd of the insertion Begin of the deletion rangeEnd of the deletion mode, Begin of the insertionbutEnd of the insertion the Begin of the insertionuser clicks on the other field (in a work package table, for example), it will not make that field active; instead, theEnd of the insertion date picker will Begin of the insertiondisplay with the existing dateEnd of the insertion Begin of the deletion remainEnd of the deletion in Begin of the insertionfocus. The user has to consciously add that second date to be able to input a range._

* _This can be challenged; we can also assume that if the user actively clicksEnd of the insertion Begin of the deletion range modeEnd of the deletion on Begin of the insertionan empty date field, it means they want to entert a value._End of the insertion Begin of the deletion next opening.End of the deletion


**Work package list**

* Begin of the insertionIn a work package table,End of the insertion Begin of the deletion WhenEnd of the deletion clicking Begin of the insertionspecificallyEnd of the insertion on Begin of the insertionStart date, Finish dateEnd of the insertion Begin of the deletion the value of a startEnd of the deletion or Begin of the insertionDuration will displayEnd of the insertion Begin of the deletion finish column,End of the deletion the date picker Begin of the deletion opensEnd of the deletion with that field Begin of the insertionin focusEnd of the insertion Begin of the deletion active:End of the deletion

* Begin of the insertion_\[open\] However, if a work package is in single date mode, but the user clicks on the otherEnd of the insertion Begin of the deletion If thatEnd of the deletion field Begin of the insertion(in a work package table, for example),End of the insertion Begin of the deletion does not exist,End of the deletion it will Begin of the insertionnot make that field active; instead, the date picker will displayEnd of the insertion Begin of the deletion openEnd of the deletion with the Begin of the insertionexisting date in focus. The user has to consciously add that second date to be able to input a range._

* _This can be challenged; we can also assume that ifEnd of the insertion Begin of the deletion equivalent ofEnd of the deletion the Begin of the insertionuser actively clicksEnd of the insertion Begin of the deletion "Add" button clicked, ie. focusEnd of the deletion on an empty Begin of the insertiondate field, it means they want to entert a value._


**Mobile**

* No additional mobile-centric behaviour in addition to what is specified in ##61051


End of the insertion Begin of the deletion field.


End of the deletion ## Visuals

**Finish date-only work package date picker:** Begin of the deletion
<img class="image_resized op-uc-image op-uc-image_inline" style="width:596px;" src="/api/v3/attachments/55831/content">End of the deletion

Begin of the deletion **Click on the add button under the sart date to add it:**
End of the deletion <img class="image_resized op-uc-image op-uc-image_inline" Begin of the insertionstyle="width:520px;" src="/api/v3/attachments/298043/content">End of the insertion Begin of the deletion style="width:596px;" src="/api/v3/attachments/55832/content">End of the deletion

Begin of the deletion **When both dates are present, the date picker goes into its usual range mode:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:596px;" src="/api/v3/attachments/55833/content">

**In range mode, clicking on a second date will complete the range (as it does today):**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:596px;" src="/api/v3/attachments/55836/content">

**Clearing a field with the X icon will clear the field but stay in range mode:**

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

End of the deletion **A start date-only date picker is possible too:**
<img class="image_resized op-uc-image op-uc-image_inline" Begin of the insertionstyle="width:520px;" src="/api/v3/attachments/298061/content">End of the insertion Begin of the deletion style="width:596px;" src="/api/v3/attachments/55834/content">End of the deletion

### Mockup

Figma link: Begin of the insertion[https://www.figma.com/design/HrWVktq0SsGI2dqqIKQ11M/Scheduling---Lag-and-Modes?node-id=1547-8988](https://www.figma.com/design/HrWVktq0SsGI2dqqIKQ11M/Scheduling---Lag-and-Modes?node-id=1547-8988)&nbsp;End of the insertion Begin of the deletion [https://www.figma.com/file/amVGcHqRQyR8x4EsqV9H99/Date-picker?node-id=261-26140](https://www.figma.com/file/amVGcHqRQyR8x4EsqV9H99/Date-picker?node-id=261-26140)End of the deletion

### Out of scope

* Begin of the insertionChanging default behaviour in the admin settings

* ~~SingleEnd of the insertion Begin of the deletion SingleEnd of the deletion date selection in range mode (something Begin of the insertionlike:~~ [~~https://flatpickr.js.org/plugins/#rangeplugin-beta)~~](https://flatpickr.js.org/plugins/#rangeplugin-beta)~~/).End of the insertion Begin of the deletion like: [https://flatpickr.js.org/plugins/#rangeplugin-beta)](https://flatpickr.js.org/plugins/#rangeplugin-beta)/).End of the deletion This is when, even in range mode, a click on the calendar sheet will affect only the actively selected Begin of the insertiondate:~~End of the insertion Begin of the deletion date:End of the deletion

* Begin of the insertion~~SelectingEnd of the insertion Begin of the deletion SelectingEnd of the deletion a range by simple clicking two dates will not be Begin of the insertionpossible.~~End of the insertion Begin of the deletion possible.End of the deletion

* Begin of the insertion~~RangeEnd of the insertion Begin of the deletion RangeEnd of the deletion preview on highlight will not be Begin of the insertionpossible.~~End of the insertion Begin of the deletion possible.End of the deletion

* Begin of the insertion~~FlippingEnd of the insertion Begin of the deletion FlippingEnd of the deletion start/finish to allow users to click-select ranges regardless of the order of the clicks (start first and then finish or vice-versa) will not be Begin of the insertionpossible.~~End of the insertion Begin of the deletion possible.End of the deletion

* Begin of the insertion~~ThisEnd of the insertion Begin of the deletion ThisEnd of the deletion is out of scope because the above plugin only supports this behaviour for basic date pickers attached to outside date inputs and not inside a modal like in our date picker. It might still be possible (effort unknown, but in all likely hood substanstial) in a hacky way but the result is likely to be unsatisfactory and error-prone compared to the above-proposed button Begin of the insertionsolution.~~ _~~(@Oliver Günther:End of the insertion Begin of the deletion solution. _(<mention class="mention" data-id="9177" data-type="user" data-text="@Oliver Günther">@Oliver Günther</mention>:End of the deletion could you confirm this is Begin of the insertionaccurate?)~~_End of the insertion Begin of the deletion accurate?)_

* Changing default behaviour in the admin settingsEnd of the deletion