CARDS-1761: Adapt React Date / Time pickers

[veronikaslc]

CARDS-1761
CARDS-1926
Affected components:

• Filters
• Date/Time questions
• Downtime Warning Configuration
• Patient identification screen

[veronikaslc]

Last screenshot has is observed in dev, notsure it is an issue though

[marta-]

@veronikaslc I think the new picker is friendly enough to use on the patient identification screen. Please replace the DropdownsDatePicker with it. Do not remove the DropdownsDatePicker component from the code base, even if it's no longer used.

[marta-]

A couple of imperfections to be tackled:

• [UI issue] The vertical alignment for date intervals (rendered as input dash input) was already not looking great in dev, but now with the date control having become taller due to the format being displayed in the label above the input, the dash looks badly misplaced. See the Date Formats Test questionnaire in the --test mode for example. Suggested fix: display: flex & align-items: baseline on the container of the input dash input + a margin-left&right: 8px on the dash.
• [UX issue] Speaking of the format being displayed in the label above the input, I don't think we really need to enforce InputLabelProps={{shrink: true}}. I would let the label overlap the input when the value is empty.
• [Bug] Time questions appear to be initialized with the current time. To replicate: add a question with the dataType: time to the Date Formats Test questionnaire, then create a form and note how the time input is rendered for a new, empty form.
  • Also, time questions with all possible formats (mm:ss, hh:mm, hh:mm:ss) should be added by default to the Date Formats Test.

Things not introduced by this PR, but nice to have since we're altering this code anyway:

• The date question's error message should be styled like in the NumberQuestion.
• In view mode, the date intervals should be displayed as from - to, like it is done for NumberQuestion, instead of from \n to

[veronikaslc]

Rebased on the latest dev and addressed comments.

[marta-]

• Patient login page: the date of birth input should be as wide as the entire row. The expected format should be displayed to the user; i suggest displaying it as helper text under the input
• There should be a way to CLEAR the value of a date or time input.

[sdumitriu]

Bug: in proms mode, on the patient login page, selecting a DoB with the picker ends up displaying the day before, even though the actual value in the component and which is sent to the server is the correct one.

Visual bug (that Marta kind of complained about): since the input is too narrow, the value doesn't fit properly, so the date displayed is 2022-08-1 , with the last digit missing. Worse when a time value is also there next to the date.