### Context

Begin of the insertionNot all work packages require a start _and_ a finish date. Often, only a finish date is necessary.

End of the insertion This feature will Begin of the insertionallow the work package date picker to go intoEnd of the insertion Begin of the deletion exploreEnd of the deletion single-date mode Begin of the insertionwhen only one date is input. By default this is the finish dateEnd of the insertion for Begin of the insertionnewEnd of the insertion work Begin of the insertionpackage, but this canEnd of the insertion Begin of the deletion packages that _could_ take a range. The goal is toEnd of the deletion be Begin of the insertionconfigured in the admin settings. It also allows users to easily go back to range mode by simply adding the other date field.End of the insertion Begin of the deletion able to:End of the deletion

Begin of the insertion### Acceptance criteria

**Work package date picker**

Modify the current work package date picker:

End of the insertion * Begin of the insertionResize the three fields (start date,End of the insertion Begin of the deletion Specify just aEnd of the deletion finish date Begin of the insertionand duration) so they are all the same width.
* IfEnd of the insertion Begin of the deletion or justEnd of the deletion a Begin of the insertionwork package has bothEnd of the insertion start Begin of the insertionand finish dates, it will open in range mode as it does today.
* Clicking on theEnd of the insertion date Begin of the insertionfield opens the date picker with all three fields (start date, finish date, duration) visible, enabled and editable.End of the insertion
* It Begin of the insertionwill behave as it does today (no change).
* The 'x' icon will continueEnd of the insertion Begin of the deletion should be possibleEnd of the deletion to Begin of the insertionclearEnd of the insertion Begin of the deletion addEnd of the deletion the Begin of the insertionvalue of the active field whilst keeping focus on it.
* If a work package has only one date, whether it be start of finish, it will open in singleEnd of the insertion Begin of the deletion otherEnd of the deletion date Begin of the insertionmode:
* The other fieldEnd of the insertion Begin of the deletion at any timeEnd of the deletion and Begin of the insertionthe duration fields are replaced by buttons (of the same width as the fields) withEnd of the insertion Begin of the deletion turn it intoEnd of the deletion a Begin of the insertioncentered + (add) icon.End of the insertion Begin of the deletion rangeEnd of the deletion
* Begin of the insertionClicking onEnd of the insertion Begin of the deletion It should be possible to deriveEnd of the deletion the Begin of the insertion+ (add) button converts the button into a field, and make it active. TheEnd of the insertion Begin of the deletion otherEnd of the deletion date Begin of the insertionpicker now goes into range mode.
* If a date is added, theEnd of the insertion Begin of the deletion whenEnd of the deletion duration Begin of the insertionbuttonsEnd of the insertion is Begin of the insertionalso automatically turned into a field. _\[**Open**: immediately or on blur after a value is input?\]_
* If a duration is added, the _other_ date field is also automatically turned into a field. _\[**Open**: immediately or on blur after a value is input?\]_
* A range date picker will remain in range mode untilEnd of the insertion Begin of the deletion known (but keepEnd of the deletion it Begin of the insertionis closed by clicking on the _Save_ button:
* If onlyEnd of the insertion Begin of the deletion asEnd of the deletion a Begin of the insertionsingle date is entered in range mode, the date picker will go into single date mode on next opening.
* If two dates are entered in range mode, the date picker will remain in range mode on next opening.

**Work package list**

* When clicking on theEnd of the insertion Begin of the deletion derivedEnd of the deletion value Begin of the insertionof a start or finish column, the date picker opens with that field active:
* If that field doesEnd of the insertion Begin of the deletion andEnd of the deletion not Begin of the insertionexist, it will open with the equivalent of the "Add" button clicked, ie. focus onEnd of the insertion an Begin of the insertionempty field.

**Admin page**

End of the insertion Begin of the deletion input value)
End of the deletion * Begin of the insertion_\[**Open**:End of the insertion Begin of the deletion When there are preceeds/follows relationships, changesEnd of the deletion to Begin of the insertionbe defined\]_ Allow admins to chooseEnd of the insertion the Begin of the insertiondefault setting for new work packages:
* FinishEnd of the insertion Begin of the deletion derivedEnd of the deletion date Begin of the insertiononly (default)
* Start date only
* Start and finish date

### Visuals

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

**Click onEnd of the insertion Begin of the deletion should also affectEnd of the deletion the Begin of the insertionadd button under the sart date to add it:**
<img class="op-uc-image op-uc-image_inline" style="width:596px;" src="/api/v3/attachments/55832/content">

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

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

**ClearingEnd of the insertion Begin of the deletion moment, this feature isEnd of the deletion a Begin of the insertionfield with the X icon will clear the field but stayEnd of the insertion Begin of the deletion workEnd of the deletion in Begin of the insertionrange mode:**End of the insertion Begin of the deletion progress that still requires further discussion to clarify user needs/feature requirements.**End of the deletion

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

**A start date-only date pickerEnd of the insertion Begin of the deletion The actual bug reportEnd of the deletion is Begin of the insertionpossible too:**
<img class="op-uc-image op-uc-image_inline" style="width:596px;" src="/api/v3/attachments/55834/content">End of the insertion Begin of the deletion below, and is related to related to ###45100.End of the deletion

### Begin of the deletion

###End of the deletion Mockup

Figma link: Begin of the insertion[https://www.figma.com/file/amVGcHqRQyR8x4EsqV9H99/Date-picker?node-id=261-26140](https://www.figma.com/file/amVGcHqRQyR8x4EsqV9H99/Date-picker?node-id=261-26140)

### Out of scope

* Single date selection in range mode (something like: [https://flatpickr.js.org/plugins/#rangeplugin-beta)](https://flatpickr.js.org/plugins/#rangeplugin-beta)/). This is when, even in range mode, a click on the calendar sheet will affect only the actively selected date:
* Selecting a range by simple clicking two dates will not be possible.
* Range preview on highlight will not be possible.
* Flipping 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 possible.
* This 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 solution. _(<mention class="mention" data-id="9177" data-type="user" data-text="@Oliver Günther">@Oliver Günther</mention>: could you confirm this is accurate?)_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

### Original bug report (archived 14.04.2023)

> ##### Steps to reproduce
>
> 1. Create a work package with only a finish date
> 2. Open the date picker
> 3. Tab to the finish date so this is active
> 4. Change a date in the mini calendar
>
> ##### What is the buggy behavior?
>
> * Not the active field (finish date) is changed. The first click changes the start date.
>
> #### <img class="op-uc-image op-uc-image_inline" style="width:595px;" src="/api/v3/attachments/54524/content">
>
> ##### What is the expected behavior?
>
> 1. Clicking in the mini calendar changes the date of the active date field (similar to Google flights)
>
> ### <img class="op-uc-image op-uc-image_inline" style="width:581px;" src="/api/v3/attachments/54523/content">