The new date picker will get some style updates mostly with regards of structure and re-use of existing Design System components (text-field, buttons etc.

**Acceptance (images copied from the feature ticket)**

Begin of the insertion<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32098/content"></div></figure>

End of the insertion * The modal has a new structure (banner - scheduling mode - dates - calendar - action bar)
* The date picker for Milestones slightly differs as there is only one date field
* Begin of the insertionScheduling modeEnd of the insertion Begin of the deletion There are some styling changes (Design system conform)End of the deletion
* The Begin of the insertion&quot;Manual scheduling&quot; checkbox is now in a new line by itself above the start/finish dates,End of the insertion Begin of the deletion buttonsEnd of the deletion and Begin of the insertionleft-aligned.
* DateEnd of the insertion Begin of the deletion textEnd of the deletion fields Begin of the deletion have our new stylesEnd of the deletion
* Begin of the insertionThere areEnd of the insertion Begin of the deletion The banner can be inEnd of the deletion two Begin of the insertionfields that use the new text field components of equal width (Start date &amp; Finish date)
* Each field has a &quot;today&quot; link underneath it.
* The start and finish dates field have &quot;clear&quot; buttons on focus that allow the user to clear that date (current behaviour).
* There is space left for where duration field will eventually go, but this isEnd of the insertion Begin of the deletion different colours (orEnd of the deletion not Begin of the insertiondisplayed yet.End of the insertion Begin of the deletion existent at all)End of the deletion
* Begin of the insertionOn focus, the field is outlined in blue (current style).
* Calendar
* Each miniEnd of the insertion Begin of the deletion TheEnd of the deletion calendar Begin of the insertionwill show weekends differently in grey as it does today. However, thisEnd of the insertion Begin of the deletion selection styleEnd of the deletion is Begin of the insertionpurely visualEnd of the insertion Begin of the deletion updatedEnd of the deletion and Begin of the insertionhas no functional valueEnd of the insertion Begin of the deletion can beEnd of the deletion in Begin of the insertion12.2.
* 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).
* Each calendar day can has multiple states depending on what kind of day it is:
* **When enabled:**
* Regular day (black text on a white background)
* Start date and finish dates (white text on a dark blue background)
* Selected but neither start/nor end (black text on a light blue background)
* Today (black on our standard current date yellow background)
* **When disabled:**
* Regular day (Gray 4 on a white background)
* Start date and finish dates (Gray 5 text on a light Gray 3 background)
* Selected but neither start/nor end (Gray 3 text on a Gray 5 background)
* Today (Gray 4 text on our standard current date yellow background)
* These colours do not change or adapt to themes or custom colours and are always these colours.
* Action bar
* There are two buttons at the bottom of the modal (cancel &amp; save)End of the insertion Begin of the deletion state &quot;disabled&quot; with greyed-out styleEnd of the deletion

Begin of the insertion**The simple date picker**

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

* Begin of the insertionis for single-day items (like Milestones) only single _date_ field.
* End of the insertion The Begin of the insertiononly difference with the regular work package date picker is that the unique date field is titled &quot;Date&quot; (no notion of start or finish dates).
* The selected date is rounded on all corners.End of the insertion Begin of the deletion mobile version looks like thisEnd of the deletion

Begin of the insertion**Mobile**

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

Begin of the insertion* Is displayed in a modal that takes almost the full available screen width.
* **\[open\]** Can we set a single value for the outside margins (1.25 or 1.5 REM, needs testing) or do we need to condition this on breakpoints?
* There is only one mini calendar (vs the two in our non-mobile version).
* The simple version of the mobile date picker:
* Has a single date field titled simply &quot;Date&quot;
* that takes 100% of the available width
* Can only allow picking a single date in the calendar (rounded on all corners)

End of the insertion **Out of scope**

* Any kind of behavioural changes including:
* Real content for the banner
* Correct selection of dates
* Correct display of dates Begin of the insertion
* The banner (will be done completely in <mention class="mention" data-id="42184" data-type="work_package" data-text="#42184">#42184</mention> )End of the insertion