feat: changes for datetimepicker component #214
Conversation
content/body/datetimepicker.php
Outdated
| <div> | ||
| <label> | ||
| <span class="datetimepicker__select-label">Enter the travel date and time</span> | ||
| <input placeholder="Select Date..." class="datetimepicker" /><!--datetimepicker input--> |
There was a problem hiding this comment.
Two things:
- 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)
- 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?)
There was a problem hiding this comment.
Hi Zoltan, I have added the aria-describedby and removed the placeholder text. I will discuss about the behaviour of Control + Shift + Arrow.
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>Up Arrow</td> |
There was a problem hiding this comment.
How does this work on mobile?
There was a problem hiding this comment.
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
force-pushed
the
datetimepicker
branch
2 times, most recently
from
9c4fd9f to
7403cbc
Compare
content/bottom/datetimepicker.php
Outdated
| function initializeFlatpickr(language) { | ||
| var fp = flatpickr(".datetimepicker", { | ||
| enableTime: true, | ||
| // disableMobile: true, // By default, Flatpicker shows the native HTML5 datepicker on mobile devices. To change this behavior and maintain a consistent appearance across all devices, set this property to true. |
There was a problem hiding this comment.
@zoltan-dulac , I have commented these two properties for now.
- disableMobile : true , disable native datetime inputs in all cases
- allowInput:true, // allows the user to enter date using keyboard
shiprarawal
force-pushed
the
datetimepicker
branch
2 times, most recently
from
fb0ea13 to
8c58400
Compare
shiprarawal
force-pushed
the
datetimepicker
branch
from
8c58400 to
4e865b5
Compare
shiprarawal
force-pushed
the
datetimepicker
branch
from
4e865b5 to
25353a7
Compare
…e-a11y into datetimepicker
|
There is still a lot of work that needs to go into this:
|
No description provided.