Re-add date picker
Closed this issue · 11 comments
Hi there! Thanks for your work on the site, it's incredibly useful and I've pointed a bunch of people towards it in my own Discord communities.
There used to be a date picker that would appear when clicked on the calendar icon, in the Date component (which is now Date and Time). At the time it was great - I didn't have to pop open an external calendar to work out arbitrary dates (e.g. next Saturday). I checked the commit history and I saw it'd been removed a while ago. I definitely remember noticing its absence at the time.
Would it be possible to have it be re-added in some form? I'm sure there was a good reason for its removal, but it's been a usability hit, for me at least.
Hi, the date time picker should allow you to select both date and time. Can you send a screenshot of the interface you see?
You can currently manually enter a date and time, yes - I'm referring to the calendar-esque widget that used to appear when clicking on this button:
Clicking it right now does nothing for me.
It seems like your browser does not have native support for the combined date time input and it's falling back to a regular text box, this is not how it should behave normally. I'll see if I can detect this lack of support somehow and show the split inputs in that case
I'm not sure it's browser support related - I tried a second browser (Edge instead of Chrome) and neither had the widget appear upon clicking on the above icon.
I'm not sure what operating system you are using, but in iOS for example all browsers use Safari's engine regardless. Either way, once I add feature detection for this it should not be an issue anymore.
Please check the site again, support for the combined input type should now be detected automatically and if it's not present the separate input should be shown
I've checked it, here's what I've noticed:
- On load, I see two fields briefly, before my browser hides then and shows the combined one.
- Clicking on the new button (the combined calendar + clock one) still does nothing on my laptop (running Windows 10).
- I tested before the change on my phone (Android) and it worked. It also works after the change.
It seems like Windows doesn't support whatever method you're using to display the picker. I'll try updating and see if it makes a difference.
I added a toggle to the top right of the input that you can use to override the detected support value which should persist across page loads, click that once and you should be good to go.
Thanks for all your prompt work on this!
With the toggle enabled, at some page sizes, the date entry is cut off, as below:
With the toggle enabled, clicking the calendar button doesn't do anything. Neither option has a date picker enabled for me, presently. I've verified that the calendar, clock and combined buttons all work on mobile, so... not sure.
I looked into it further and apparently the browser native picker now needs to be manually triggered by the developer (me) as of Chrome version 99 (Edge uses the same engine as Chrome). I added the few lines of code that should do this, in my testing just now the picker shows up in both input modes. So far I have been testing on Firefox which does not have this requirement.
It works! Thank you so much for your hard work!