Web App Time Field

[Samiul_Hassan]

Hi,

I am quite new to Xojo and have read through the guide.
I would like to develop a web app mainly intended for tablet users. I have noticed for web apps, there is no date/time control, but only a date picker control. Therefore, I am thinking of collecting time information (hours and minutes) from end users using 2 separate number fields as shown in image attached.

Firstly, is this the best way to capture time in Xojo without having a time picker control? Do you have any better suggestions?

If this is an acceptable method, how can I:

1. Format the number field to 2 digits (i.e. show a leading zero if time unit is only one digit)

2. Set the min and max range for the number fields (i.e. hours 00-23 and minutes 00-59) if the user chooses to type time unit in instead of using +/- buttons

The UI/UX should be appropriate for tablet touchscreen users.

[Gary_Smith]

In my web app, I use a webpopupmenu prefilled with the hour 00 to 23 and similar for the minutes. I don’t think users would like to click that plus button 58 times to get to 58 minutes.
You could just allow the user to enter a number then validate that the number is in range then format it to look correct.
It is up to you, but I always try to look at it from the users point of view.
Thanks

[Hector_Marroquin]

This is my approach too

[Ivan_Tellez]

@Samiul_Hassan

Firstly, is this the best way to capture time in Xojo

ABSOLUTLY NOT. First of all, Xojo dont have client side code, that means, each time a user clicks the button, the web app sends the event to the server, the server does the math, then returns the new value. In other words, Xojo sucks for any user input action. The time for the roundtrip to the server is long enought to make the user think they didnt click the button, causing frustration and extra clicks.

And for the solution, like the others said, webpopupmenu is better.

[Ricardo_Cruz]

There is a way worth to try. Add a WebTextField to the page and add this JavaScript in its Shown event:

Me.ExecuteJavaScript("document.getElementById('" + Me.ControlID + "_field').type = 'datetime-local';")

This will turn the plain text field into a datetime-local field.

In order to convert it into a DateTime object, this code should do the trick:

Var d As DateTime = DateTime.FromString(TextField1.Text.Replace("T", " "))

Please note the conversion will throw an exception if the field is empty, wrap it into a try/catch and handle it.

[Samiul_Hassan]

@Ricardo_Cruz

Me.ExecuteJavaScript("document.getElementById('" + Me.ControlID + "_field').type = 'datetime-local';")

Wow this looks like it would do what I want without having addition text fields. Although I tested running that javascript code on shown event for a date field, but I am not getting the time popup when a date is selected. I tried multiple browsers and it is the same. Any ideas why?

[Samiul_Hassan]

I was thinking of having both options to allow the user to type in the time as well as use buttons especially if they are operating from a tablet. But you raised a very good point about button action being handled on the server side so probably not a good idea.

[Greg_O]

This technique will work mostly on mobile devices, but Desktop browsers mostly don’t provide this UI.

[Ricardo_Cruz]

Yes, that’s true, it’s just Samiul said it will be used by tablet users.

@Samiul_Hassan it looks like you’re using a DatePicker instead of a TextField.

[Samiul_Hassan]

Ok thanks. Yes, sorry I used a DatePicker by mistake. Also, I apologise, I am designing for use from a tablet (as needs more thought around UI) but also needs to be accessible from a desktop browser.
In any case, I tested your solution, and it is working from Edge desktop browser!
From desktop Firefox browser, only the date picker appears but it allows you to enter time manually using the keyboard.
I presume most mobile browsers will work with date and time picker.

[Ricardo_Cruz]

If desktop browsers are required, then my suggestion won’t be useful, sorry about that.

[Samiul_Hassan]

But your solution seems to be working fine using Edge browser from a desktop!

[Ricardo_Cruz]

It looks like it will work in modern browsers, except in Internet Explorer:

[Samiul_Hassan]

I can see it let’s me enter an invalid date. However, it does display a tooltip to let me know it is invalid.

How is best to check for invalid dates? I have very little JS experience. Is there a javascript property I can check to see if date in field is valid before converting to Xojo datetime type? or is it best practice to check in the try/catch block when attempting to convert to DateTime type in Xojo?

[Ricardo_Cruz]

I’ve been checking the docs and it will be safer for you to go with another solution. While the internal value in HTML should be the same, the text may differ between browsers.

A complete solution would require to use the WebSDK. That would be a nice Open Source project, if anybody wants to give it a try .

[Anthony_G_Cyphers]

You don’t say that third-party solutions are off the table, so I’d recommend my own GraffitiDateTimePicker. Works well on all devices and supports both date and time entry/selection or each individually. It displays data in the user’s current locale in the browser.

[Samiul_Hassan]

What if I use a DatePicker for the date part. And then use javascript time type.
This way invalid dates will not be accepted by DatePicker.
I can then create DateTime variable in Xojo by taking Date from DatePicker as String and concatenating with textfield ‘time’ string?

[Ricardo_Cruz]

That sounds like a plan, give it a try and ask again if you get blocked.