Content
View differences
Updated by Niels Lindenthal 10 months ago
**As** a project member using a mobile device (including Safari on iOS)
**I want to** select the date of a work package with a mini calendar
**so that** I can see the week day of the day I selected. And I also want to understand whether I selected a working-day or a non-working day.
#### **Acceptance criteria**
* ~~Harmonize the date picker concepts between mobile app and mobile web.~~
* In order to go around Safari's odd behaviour with date fields \[1\], we will adjust the date picker on mobile devices:
* Show Start and Finish date input fields on the same line
* Use type text instead of date (to avoid showing a second date picker, and avoid having a 'date' icon show on some browsers)
* Allow focus on the fields (so that the user can pick which date to modify) but suppress displaying OS keyboard
* Hide Duration
* Show a Flatpicker mini-calendar (only one month, not two as in desktop)
* This will be the only way users are able to input dates; they can no longer type it in (similar to Google Flights, as [Niels requested](https://community.openproject.org/projects/design-system/work_packages/66050/activity#comment-1390497))
* These changes apply to the date picker on _all_ mobile devices; we will no longer maintain separate behaviour for Safari.
#### **Visuals**
[Mockups here](https://www.figma.com/design/HrWVktq0SsGI2dqqIKQ11M/Scheduling---Modes--Lag--Single-date?node-id=2103-9897).
**If the viewport affords displaying the full date picker:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:353px;" src="/api/v3/attachments/748853/content">
**If scroll is required:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:349px;" src="/api/v3/attachments/748855/content">
#### **Technical notes**
* If we are unable to suppress the OS keyboard effectively (to avoid showing two different date pickers), we might have to disable the date fields completely. However, this can make it difficult to change _only_ the finish date, for example.
* \[1\] on mobile Safari: if a date field is empty, it replaces it with today's date on focus; given all the front-end logic we have on our date picker, this can inadvertently cause data change or even data loss. For this reason, we will use an input type of text instead.
#### **Permissions and visibility considerations**
* _No changes_
**I want to** select the date of a work package with a mini calendar
**so that** I can see the week day of the day I selected. And I also want to understand whether I selected a working-day or a non-working day.
#### **Acceptance criteria**
*
*
* Show Start and Finish date input fields on the same line
* Use type text instead of date (to avoid showing a second date picker, and avoid having a 'date' icon show on some browsers)
* Allow focus on the fields (so that the user can pick which date to modify) but suppress displaying OS keyboard
* Hide Duration
* Show a Flatpicker mini-calendar (only one month, not two as in desktop)
* This will be the only way users are able to input dates; they can no longer type it in (similar to Google Flights, as [Niels requested](https://community.openproject.org/projects/design-system/work_packages/66050/activity#comment-1390497))
* These changes apply to the date picker on _all_ mobile devices; we will no longer maintain separate behaviour for Safari.
#### **Visuals**
[Mockups here](https://www.figma.com/design/HrWVktq0SsGI2dqqIKQ11M/Scheduling---Modes--Lag--Single-date?node-id=2103-9897).
**If the viewport affords displaying the full date picker:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:353px;" src="/api/v3/attachments/748853/content">
**If scroll is required:**
<img class="image_resized op-uc-image op-uc-image_inline" style="width:349px;" src="/api/v3/attachments/748855/content">
#### **Technical notes**
* If we are unable to suppress the OS keyboard effectively (to avoid showing two different date pickers), we might have to disable the date fields completely. However, this can make it difficult to change _only_ the finish date, for example.
* \[1\] on mobile Safari: if a date field is empty, it replaces it with today's date on focus; given all the front-end logic we have on our date picker, this can inadvertently cause data change or even data loss. For this reason, we will use an input type of text instead.
#### **Permissions and visibility considerations**
* _No changes_