# Feature OP-11973 - Basic drop-down date picker for date fields that are already input fields
Project: OpenProject
Status: closed
URL: https://community.openproject.org/work_packages/OP-11973
## 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
_No work packages_
## Bugs and other work packages
_No work packages_
## Technical Details
| Attribute | Value |
| --- | --- |
| Module | |
| Feature Flag | |
| Requires doc change | Yes |
| 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
This feature is a variation of the "simple" date picker (#42358) for date fields that are already input fields. See *Context* below for more information about why this is needed.
### Acceptance criteria
- Implement a basic Flatpickr date picker for date fields that are already input fields (list below).
- Style the date picker to look like our standard date picker (see visuals/current implementation).
- Not describing the colours here to avoid deuplications of specs. The rules were described in \#42047 and subsequently updated by \#41341 (for non-working days).
- Note that these colours will be slightly updated in a forthcoming work pacakge: ###46237
- **\[open\]** Keep the indication of week number, as was the case previously.
- Use this basic dropdown date picker in these places:
- [x] Log time -
- [x] Work package and project custom fields
- [x] Log unit costs -
- [x] Meeting minutes -
- [x] Work package table filters
- [x] Work package bulk edit form -
- [x] Announcement edit form -
- [x] Version new & edit form + custom fields
- [x] Project filters
- [x] Cost report filters
- [x] Budget forms -
- [x] Backlogs -
- [x] Dynamic forms -
- [x] Pause date reminders (with date range input field)
- Do not use them for these places (use [simple drop modal date picker](https://community.openproject.org/projects/openproject/work_packages/42358/activity) instead):
- Single non-working days
- Revert to a native date picker on mobile (for only this basic date picker).
- This is to avoid both the date picker modal and the keyboard being present, which tends to block the actual date input field (which isn't part of the modal).
### Visuals
Basic date picker:
Basic date picker with week numbers:
Log time with the basic datepicker:
### Context
The simple date picker was originally specified to be modulable and able to take input fields when they are needed (like for the date picker module for [adding non-working days](https://community.openproject.org/projects/openproject/work_packages/41226/activity)):
> 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)
We learnt, during implementation, that since the simple date picker is implemented as a drop modal that traps focus (for accessibility), it is not able to access an input field outside of it. This necessitated for the date picker to repeat the input field *or* be triggered by a non-input method.
For date fields that are already input fields, this is a regression compared to the basic Flatpickr datepicker that it replaced for these particular fields, which, although non-standard, was more usable and avoided repeating fields.
This work package seeks to attach that simple basic Flatpickr datepicker to these fields.
After this version is implementation, there will be three variations of the date picker:
- **Work package date picker** (only for work package start/finish dates, with info banners, start/finish dates or single "date" field, switches for "working days only" and "manual scheduling")
- **Range**
- **Single** (only for milestones)
- **Modal date picker** (for date pickers that are not attached to input fields, with optional additional input fields like "Name" and the "Working days only" switch)
- **Single**
- ~~**Range** (unused at the moment)~~
- **Basic date picker** (for date pickers attached to existing existing date input fields, works as a dropdown, basic Flatpickr implementation)
- **Single**
- **Range** (for pausing email reminders, for example, where the input field takes a range)
This work package describes this last variation.
### Prototype
Figma prototype: