### Steps to reproduce

1. Go to a work package whose dates can be modified on a mobile Begin of the insertiondeviceEnd of the insertion Begin of the deletion deficeEnd of the deletion
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 positioned Begin of the insertioncorrectly:End of the insertion Begin of the deletion correctedly:End of the deletion
* 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.
* 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 Begin of the insertionpossiblyEnd of the insertion Begin of the deletion possibleEnd of the deletion Android, need to check).
* Pressing the "return" button after typing in a date dismisses the date picker without saving the information.

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

**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 Begin of the insertiontappingEnd of the insertion Begin of the deletion tappingnEnd of the deletion return dismissed the date picker):**

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

### What is the expected behavior?

The date picker is positioned correctly:

* The date picker 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).
* 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:

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