feat: changes for datetimepicker component

[shiprarawal]

No description provided.

[zoltan-dulac]

Two things:

1. Let's remove the placeholder text. (Just because I don't want to showcase it, since a lot of people tend to use it instead of labels)
2. We need an sr-only aria-describedby that gives keyboard instructions. Something like:

"Enter in YYYY-MM-DD format or use Control + Shift + Arrow Keys to change the date".

(I believe Control + Shift + Arrow works for all operating systems, correct?)

[shiprarawal]

Hi Zoltan, I have added the aria-describedby and removed the placeholder text. I will discuss about the behaviour of Control + Shift + Arrow.

[zoltan-dulac]

How does this work on mobile?

[shiprarawal]

As described in this article, When flatpickr detects a mobile browser, it turns the date input into a native date/time/datetime input. To disable this behaviour, I have set the property, disableMobile: "true".
After setting this property, the flatpicker has the consistent look and feel across all devices.
(https://flatpickr.js.org/mobile-support/). Let me know if you feel we should remove this property.

[shiprarawal]

@zoltan-dulac , I have commented these two properties for now.

1. disableMobile : true , disable native datetime inputs in all cases
2. allowInput:true, // allows the user to enter date using keyboard

[zoltan-dulac]

There is still a lot of work that needs to go into this:

1. I cannot enter a date by just typing it in. If I try to enter 20012102 by hand (without dashes), and tab out, it doesn't enter the date correctly (it converts to "2002-10-01", which is a really odd choice).
2. When I cycle by month or year using a keyboard focus goes onto the first date in the calendar. It should go on the first date for the current month so it's not confusing to screen reader users. For example, if I am in April 2024, and I use Control+Shift+Left Arrow to go to the previous month, focus goes to Feb 25, 2024 instead of March 1, 2024, which I think would be expected. This is because Feb 25, 2024 is the first date in the calendar, but not the first date of the month (see screenshot below to see what I mean).