When using a date/time picker UI element in iOS, the keyboard always pops up hiding the cancel/apply button. Clicking “Done” on the keyboard hides it, but then changing the time makes the page scroll and hides the Apply/Cancel buttons again.
Not the most user friendly UI on mobile. Would be great to have more of a “mobile-first” experience for this UI widget.
@meredydd How about adding date/datetime-local/time as type parameters to either the TextBox component or the option to fallback to them in the DatePicker component? They both seem to work really well on mobile.
I tried to manually set self.my_text_box.type = 'date' in my init – but anvil seems to ignore that.
I put together a custom component for this. Feel free to clone if you find it useful.
https://anvil.works/build#clone:4N22PWKTIQ2EHTOP=4RQLTXIQNVFLSB6IU3SS5QT5
Very clean!
Thank you!
Very nice, but I haven’t a clue how that works.
I can’t see where you build the calendar display, or if you import it, or…well…anything really.
For simple people like me, would you be kind enough (if you have the time) to explain how that does what it does, especially around displaying the calendar on the screen?
I might just be tired … bed calls.
@david.wylie This is leaning on native functionality built into your browser. If you were to create this directly in HTML, you’d do something like:
<input type="datetime-local" value="2022-10-05T19:30" min="2022-09-07T00:00" max="2022-11-14T00:00">
The important part is setting the input tag’s type attribute to datetime-local (assuming you want a date and time picker).
I basically just piggybacked on the TextBox component and used Anvil’s javascript interop to patch the type attribute.
After that, it was just a matter of duplicating the DatePicker’s API so that this can be used as a drop in replacement.
I had no idea displaying a datetime picker was that easy! Thank you for that.
If there’s anyone else like me who was unaware of all the input types available, here’s a convenience link to add to the ones @erik posted above which shows them :
Can you help me understand the behavior of the input field? I find it impossible to type the date out in the field and my only option is to use the date picker function. When typing, it does not allow me to type a 2 digit day or month, but keeps resetting the value to 0.
(quotes mine.) It would certainly help to know which input field! How have you defined your input field, in your specific case?
