# Feature DREAM-421 - Re-add the mini calendar in the date picker of mobile web

Project: Stream Design System
Status: closed
URL: https://community.openproject.org/work_packages/DREAM-421

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 16.6.0 |
| Sprint |  |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

| ID | Type | Subject | Status | Assignee | Target versions | Spent time | Module |
| --- | --- | --- | --- | --- | --- | --- | --- |
| DREAM-524 | Bug | Safari date picker opens on calendar, hiding the top banner | closed |  | 16.6.0 |  | Native apps / Mobile, Frontend components and Primer design system / Date picker, Frontend components and Primer design system |
| DREAM-525 | Bug | Missing Predecessors/Successors/Child tab on Date picker | rejected |  | 16.6.0 |  | Frontend components and Primer design system, Native apps / Mobile, Frontend components and Primer design system / Date picker |

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Modules and project features / Work packages, Frontend components and Primer design system / Date picker |
| Feature Flag |  |
| Requires doc change | Yes |
| Enterprise plan | Community (COM) |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups | https://www.figma.com/design/HrWVktq0SsGI2dqqIKQ11M/Scheduling---Modes--Lag--Single-date?node-id=2103-9897 |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers | Henriette Darge |
| Designer | Parimal Satyal |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

**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**

  - 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*