# Feature OP-10425 - Standardise date pickers outside of the main work package date field

Project: OpenProject
Status: closed
URL: https://community.openproject.org/work_packages/OP-10425

## Planning

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

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

| ID | Subject | Type | Status | Assignee | Target versions | Spent time |
| --- | --- | --- | --- | --- | --- | --- |
| OP-11935 | Update date picker and associated components to use current theme colours | Feature | closed |  | 12.5.0 |  |
| OP-11960 | Accessibility for the new date pickers | Feature | closed |  | 12.5.0 |  |

## Bugs and other work packages

| ID | Type | Subject | Status | Assignee | Target versions | Spent time | Module |
| --- | --- | --- | --- | --- | --- | --- | --- |
| OP-11970 | Bug | Wrong hover color on month selector arrow in new date picker | closed |  | 12.5.0 |  |  |
| OP-11966 | Bug | Fix hover effect on days in the new date picker | closed |  | 12.5.0 |  |  |
| OP-11943 | Bug | Single date picker: margin error | closed |  | 12.5.0 |  |  |
| OP-11931 | Bug | White space added to page when datepicker opens to bottom | closed |  | 12.5.0 |  |  |
| OP-11930 | Bug | The label on the Date picker (for non-working days and elsewhere) button is wrong: should be Add instead of Save | closed |  | 12.5.0 |  |  |
| OP-11929 | Bug | Date picker on Mobile does not take the full screen | closed |  | 12.5.0 |  |  |
| OP-11959 | Bug | Datepicker bugs on backlogs | rejected |  | 12.5.0 |  |  |
| OP-11965 | Task | Document the new datepicker in our design system | on hold | Parimal Satyal | 12.5.0 |  |  |
| OP-11928 | Bug | Date picker on Non-working days keeps the previously entered date after the non-working day is added | closed |  | 12.5.0 |  |  |
| OP-11927 | Bug | Date picker on Non-working days: not enough spacing between the date field and the calendar + arrows | closed |  | 12.5.0 |  |  |

## Technical Details

| Attribute | Value |
| --- | --- |
| Module |  |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Found in mobile app version |  |
| Follow-up feedback e-mail |  |
| Accessibility | No |

## People

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

## Estimates and progress

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

## Description

The date picker for work packages were updated in versions 12.2 and 12.3. There are however other views in OpenProject where date pickers exist and that are currently implemented differently than on work packages.

This feature seeks to list all of these different views, and propose a standardised "date-only" date picker that looks and behaves the same as the date picker for work packages.

### Identified views

  - **Single non-working days**

**(Update 15.02.2023)**  
These views will now NOT use this simple drop-modal date picker. Instead, they use the basic drop-down datepicker, described in: <mention class="mention" data-id="46236" data-type="work_package" data-text="###46236">###46236</mention>

  - **Log time** (from work package, from My Saved view, when editing previously logged time)
  - **Log unit cost** (from work package, when editing previously logged unit cost)
  - **Meeting minutes**
  - **Work package table filters**
  - **Work package bulk edit form**
  - **Announcement edit form**
  - **Version new & edit form + custom fields**
  - **Project filters**
  - **Cost report filters**
  - **Cost report filters**
  - **Budget forms**
  - **Dynamic forms**
  - **Pause date reminders**
  - **Work package and project custom fields**

### Date-only picker

The date-only picker is a variation of the date picker for work packages (described in <mention class="mention" data-id="42047" data-type="work_package" data-text="#42047">\#42047</mention>):

  - It behaves like a drop modal.
      - In mobile, the drop modal takes the full-screen (and effectively behaves as a normal modal). This can cause double-layering in some cases; this is acceptable.
  - It doesn't have the scheduling or banner bits.
  - It is otherwise the same as the simple date picker used in mobile.
  - There is the option to add additional input fields on top of the date if needed, for example:
      - Text fields
      - Repeated date field (if the item calling the date picker isn't an input field)
  - The toggle of "Working days only" is not enabled by default but can be added where relevant.
      - For 12.5, they will only be enabled in these places:
          - ~~Log time~~
          - ~~Log unit cost~~
          - Work package and project custom date fields
          - ~~Announcement edit form~~
          - ~~Cost report filter~~
          - ~~Budget forms~~
          - ~~Meeting forms~~
      - When the toggle is displayed, it is *ON* by default.
  - The text for primary button in the action bar is configurable:
      - **By default, it is "Apply"** (where the action then requires a save action later)
          - Log time
          - Log unit costs
          - Meeting minutes
          - Pause date reminders
          - Work package table filters
          - Work package bulk edit form
          - Announcement edit form
          - Version new & edit form + custom fields
          - Project filters
          - Cost report filters
          - Cost report filters
          - Budget forms
          - Dynamic forms
      - **In the following places, it is "Add"** (where the action adds the date to a list)
          - Single non-working days
      - **In the following places, it is "Save"** (where the action saves the data immediately)
          - Work package and project custom fields (type date)
          - Milestones
          - Backlog edit
  - The logic and behaviour follows the current implementation in <mention class="mention" data-id="42047" data-type="work_package" data-text="#42047">\#42047</mention>.

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

### Out of scope

  - The fact that the currently used date picker (the default Flatpickr one), has week numbers whereas the "new" OP one does not. Some clients have requested this to be reinstated; this is being tracked in <mention class="mention" data-id="35329" data-type="work_package" data-text="#35329">\#35329</mention>.
