### Steps to reproduce

1. Go to a work package whose dates can be modified on a mobile defice
2. Open the date picker by clicking on the dates field in a work package form

### What is the buggy behavior?

* The date picker is not Begin of the insertionpositionedEnd of the insertion Begin of the deletion renderedEnd of the deletion correctedly:
* The date picker does not make use of the full width available to it
* The date picker is anchored to the top edge of the screen. Begin of the insertion
* The main header that appears/disappears on scroll pushes the date picker up and down.
* The start date, finish date and duration fields do not open the "numbers" keyboard on iOS (and possible Android, need to check).
* Pressing the "return" button after typing in a date dismisses the date picker without saving the information.End of the insertion

<img class="op-uc-image op-uc-image_inline" Begin of the insertionstyle="width:281px;"End of the insertion Begin of the deletion style="width:419px;"End of the deletion src="/api/v3/attachments/38887/content">

Begin of the insertion**Here is a screen capture of how the mobile version behaves on edge currently (notice how the top header pushes the date picker up and down, and how tappingn return dismissed the date picker):**

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

End of the insertion ### Begin of the deletion

###End of the deletion What is the expected behavior?

The date picker is Begin of the insertionpositionedEnd of the insertion Begin of the deletion renderedEnd of the deletion correctly:

* The date picker Begin of the deletion makes use of the full width available to it, vertically and horizontally. It should be centered on the viewport.
* The date pickerEnd of the deletion is displayed with a dark background and has a consistent margin all around (same as other modals like _Include projects_ and _Project select,_ but without a close button). Begin of the insertion
* The date picker makes use of the full width available to it, vertically and horizontally. It should be centered on the viewport.
* Horizontal scrolling is not possible.

The date picker input fields react correctly to keyboard inputs:

* The start date, finish date and duration fields open the numeric keyboard, not alpha-numeric one.
* Pressing the &quot;return&quot; button after typing in a date should be the equivalent of blurring that field (confirming), not dismissing the date picker:End of the insertion

The mobile version should be arranged like this:

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

When vertical space is not enough, it should behave like this, so that the action bar on top:

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

###

### Environment information

**OpenProject version**

OpenProject 12.3.0 (9c9f3460) on Edge

**Browser**

* [ ] Chrome
* [ ] Firefox
* [ ] Safari
* [x] Mobile Safari
* [x] Other (please specify)
* [x] Mobile Firefox

**Language**

EN