Content
View differences
Updated by Benjamin Bädorf over 3 years ago
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 <mention class="mention" data-id="42047" data-type="work_package" data-text="#42047">#42047</mention> and subsequently updated by <mention class="mention" data-id="41341" data-type="work_package" data-text="#41341">#41341</mention> (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 - [https://github.com/opf/openproject/pull/12131](https://github.com/opf/openproject/pull/12131)
* [x] Work package and project custom fields [https://github.com/opf/openproject/pull/12131](https://github.com/opf/openproject/pull/12131)
* [x] Log unit costs - https://github.com/opf/openproject/pull/12131
* [x] Meeting minutes - https://github.com/opf/openproject/pull/12134
* [x] Work package table filters https://github.com/opf/openproject/pull/12125
* [x] Work package bulk edit form - https://github.com/opf/openproject/pull/12136
* [x] Announcement edit form - https://github.com/opf/openproject/pull/12134
* [x] [ ] Version new & edit form + custom fields
https://github.com/opf/openproject/pull/12134/
* [x] Project filters https://github.com/opf/openproject/pull/12125
* [x] Cost report filters https://github.com/opf/openproject/pull/12132
* [x] Budget forms - https://github.com/opf/openproject/pull/12134
* [x] Backlogs - https://github.com/opf/openproject/pull/12124
* [x] Dynamic forms - https://github.com/opf/openproject/pull/12135
* [x] Pause date reminders (with date range input field) https://github.com/opf/openproject/pull/12137
* 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
### Visuals
Basic date picker:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/51291/content">
Basic date picker with week numbers:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/51334/content">
Log time with the basic datepicker:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/51335/content">
### 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:
[https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/Duration-and-Non-Working-Days?node-id=2835%3A78591&t=bPoeZcpI8pbu9cDJ-1](https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/Duration-and-Non-Working-Days?node-id=2835%3A78591&t=bPoeZcpI8pbu9cDJ-1)
### 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 <mention class="mention" data-id="42047" data-type="work_package" data-text="#42047">#42047</mention> and subsequently updated by <mention class="mention" data-id="41341" data-type="work_package" data-text="#41341">#41341</mention> (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 - [https://github.com/opf/openproject/pull/12131](https://github.com/opf/openproject/pull/12131)
* [x] Work package and project custom fields [https://github.com/opf/openproject/pull/12131](https://github.com/opf/openproject/pull/12131)
* [x] Log unit costs - https://github.com/opf/openproject/pull/12131
* [x] Meeting minutes - https://github.com/opf/openproject/pull/12134
* [x] Work package table filters https://github.com/opf/openproject/pull/12125
* [x] Work package bulk edit form - https://github.com/opf/openproject/pull/12136
* [x] Announcement edit form - https://github.com/opf/openproject/pull/12134
* [x]
https://github.com/opf/openproject/pull/12134/
* [x] Project filters https://github.com/opf/openproject/pull/12125
* [x] Cost report filters https://github.com/opf/openproject/pull/12132
* [x] Budget forms - https://github.com/opf/openproject/pull/12134
* [x] Backlogs - https://github.com/opf/openproject/pull/12124
* [x] Dynamic forms - https://github.com/opf/openproject/pull/12135
* [x] Pause date reminders (with date range input field) https://github.com/opf/openproject/pull/12137
* 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
### Visuals
Basic date picker:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/51291/content">
Basic date picker with week numbers:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/51334/content">
Log time with the basic datepicker:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/51335/content">
### 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:
[https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/Duration-and-Non-Working-Days?node-id=2835%3A78591&t=bPoeZcpI8pbu9cDJ-1](https://www.figma.com/file/SMzHAQWcY9k0PkTEKd5UQn/Duration-and-Non-Working-Days?node-id=2835%3A78591&t=bPoeZcpI8pbu9cDJ-1)