Fixes: wojtekmaj#659

There is an issue when trying to input a date such as "29 / 02 / 2024"
(February 29th 2024) which is a leap year and should be valid.

The validation runs into a state where the input fields are first rendered
with the inputs
day: 29
month: 2
year: 202

which is not a leap year, and thus the day 29 is not valid for this state.

The problem occurs when running the onChangeExternal,
which tries to read the validity state of the dayInput react Ref.
However, that ref has last been rendered with a min/max number value
calculated from the previous month and year (month 2 and year 202).
Therefore the day input field still believes that the day 29 is not valid,
even though we have just entered 2024 into the year field.

This workaround is to just use a new instance of a DOM input field that
emulates what the real input field should do,
and check this validity value instead, which will be correct using the current updated values.
The real input field values will become valid next render cycle.
Ironic to make another "shadow DOM" inside react, but at least it works.

Added a bunch of unit tests for this case, and improved the
test coverage of utility methods as well