Mobile friendly date/time picker

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.

6 Likes

@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

4 Likes

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.

1 Like

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 :

2 Likes