Time picker

[nlk10010]

Re: Time picker

Hey Steve,

I've confirmed the behaviours, as in my post, and per your test page as well. I feel there may be a data issue as well when using the iPad time picker and you don't load in a default value and the UX is data bound. In my test, with a data bound UX, iPad timepicker, no data is displayed when the UX is rendered, and after a record is saved.

David, I just ran into this problem on iPhone and Android, Html5 time picker allows you to pick time, displays it, but won't display a time on bound fields (either on load or after save). I may need to go back to the "Spinner" solution offered in this thread, but I'd really rather use the Html5 control.

Thanks for any update.

[Davidk]

Re: Time picker

I currently use my own window containers with spin lists etc. for dates/times and other input processes. I find it gives the user a more mobile look and feel. However, I have recently used the date time picker without issue. This thread was really old and so I don't think the same issues are present. You'd have to post a sample to illustrate what you're seeing and then I can use that to test.

[nlk10010]

Re: Time picker

I currently use my own window containers with spin lists etc. for dates/times and other input processes. I find it gives the user a more mobile look and feel. However, I have recently used the date time picker without issue. This thread was really old and so I don't think the same issues are present. You'd have to post a sample to illustrate what you're seeing and then I can use that to test.

I realize this thread is (was) old, but I couldn't find any other threads on the topic. I just ran into this behavior. I had implemented the spinlist suggestion, which seemed to be working fine, but as an experiment I tried using the Html5 time picker. This approach was very neat and the control seemed to integrate perfectly with both iPhone and Android. But after experimenting with updating the back-end database I found that, while I COULD set the control and do the update successfully, the control would NOT display the datafield it was bound to, neither on initial load of the form nor after the update callback.

Could this be MY error? Sure, I make a lot of them, but I have a sneaking suspicion this is a problem with Alpha and the Html time control. I'm going to attempt to cobble up a simple, small test app to reproduce the problem, I guess that will give me a better idea of whether this is pilot error or not.

Thanks for posting a response.

[nlk10010]

Re: Time picker

I've gotten a stripped down project (one UX containing a list and a textbox bound to a datetime field) that demonstrates what I perceive to be the problem. The bound textbox comes up as blank when it's set as an Html5 time control. By this I mean when viewed on iPhone or Android. Doing a preview (working or live), even with the mobile simulator, the bound control displays its contents presumably because it's not rendered as an Html5 control.

I have versions using both a MySQL database and a DBF table.

I really don't have time to futz around with this, I'll have to go back to the spinlist approach. If I have time I'll zip up the workspace and submit it to Alpha; again, it may not be a bug, I don't know, but there's not much more I can do to strip things down and see why an Html5 time control doesn't appear to work.

[Davidk]

Re: Time picker

Zip it and the MySQL table and post it here... let's have a look. That way any issues can be confirmed. Are you building a PhoneGap Build app or running it as a web app on a device in a browser?

[nlk10010]

Re: Time picker

No PhoneGap, just accessing it on iPhone through Safari and Blackberry (Android) through Chrome.

OK, Zip file containing the "Html5Test" workspace plus a dump of a single MySQL table is attached. Both the DBF file and the MySQL table contain a couple of records with the "ActualDeliveryDate" field (DATETIME) non-blank. There are two UX dialogs in the project, one for the DBF file and one for the MySQL. Each just contains a simple list, clicking on any item in the list opens a panel containing two fields, one of which is the "ActualDeliveryDate" set as Html5 type "time" (I just want to display the time part).

What I did was simply execute a "Remote Test" of each component (in my case I displayed a QR code and read it on each of my devices). Selecting any item in the list shows the fields but the "ActualDeiveryDate" Html5 control is blank. If you do a "Working Preview" the field will NOT be blank because the component is rendered as a text field.

Look, there may be something obvious I'm missing, I just can't see it.

Any assistance gratefully received.

[Davidk]

Re: Time picker

The Display format for your time is not quite right. You want to get rid of the 'am' and use...

time("0h:0m",<value>)

not

time("0h:0m am",<value>)

The other properties settings you have and the browsers figure out the am/pm stuff and display that for you. This works in Live Preview in a Browser, iOS and Android.

Overall, I'm not sure I'd set up your UX / List / Details like this... unless you have a good reason to. I'd use the List Detail functionality. What you're doing is filling the list with data... and then going back to the server to get that data to display in the detail panel. You're making another trip where you don't need to.

Turn on the Detail property of the List and map your detail controls in the List Detail tab. Then you don't need an action to go get data because you're data bound via the List control.

[nlk10010]

Re: Time picker

The Display format for your time is not quite right. You want to get rid of the 'am' and use...

time("0h:0m",<value>)

not

time("0h:0m am",<value>)

The other properties settings you have and the browsers figure out the am/pm stuff and display that for you. This works in Live Preview in a Browser, iOS and Android.

Overall, I'm not sure I'd set up your UX / List / Details like this... unless you have a good reason to. I'd use the List Detail functionality. What you're doing is filling the list with data... and then going back to the server to get that data to display in the detail panel. You're making another trip where you don't need to.

Turn on the Detail property of the List and map your detail controls in the List Detail tab. Then you don't need an action to go get data because you're data bound via the List control.

Ahhh, well, I never would have figured that one out (I just used a "pre-defined" Alpha format string). The component is just a test; regardless, what you're saying about the unnecessary round trip sounds right. Let me take a look.

Again, I wish this had come up in a search, it wastes your time and mine trying to figure it out. Is this documented somewhere and I just missed it? Is it an Alpha thing or is there "general knowledge" out there that you don't use am/pm with Html5 time controls? You needn't answer these, of course, I guess they're basically rhetorical questions. Jeez.

Thank you again for your help (regardless of whether this turns out to cure my problem. :) ).

[Davidk]

Re: Time picker

The 1st, 2nd, and 3rd place to check for stuff (depending on what you're doing) when things aren't working as you want them is the XBasic debugger, the Browser debugger, and the Browser Console. When I ran your component under desktop Chrome and Inspected the page and the Console reported this...

The specified value "02:50 pm" does not conform to the required format.  The format is "HH:mm", "HH:mm:ss" or "HH:mm:ss.SSS" where HH is 00-23, mm is 00-59, ss is 00-59, and SSS is 000-999.

Browsers, by their nature, break or cough, or are silent when they hit something they're not happy about... and they all do it in different ways. Chrome doesn't like the "am" and it tells you what it doesn't like. Hey... maybe Chrome just isn't a morning browser. Safari doesn't like it either. Firefox handles it... and it displays just fine... as well as a format without the "am"... but then you don't get the "am/pm".

You have to check the simple stuff first, across multiple browsers, and that usually gives you a clue where to look next.

[nlk10010]

Re: Time picker

Thanks for the advice. I was just testing in FireFox (Chrome gives me heartburn when it displays alerts), and FireFox had no issue. Neither did Working Preview. Of course neither displays the Html5 control, just a textbox.

I find in my normal line of work that experience is usually the best way to become educated. I won't forget this little episode, or your admonition. Maybe some day I will appear to others as insightful and ingenious as you do to me today. :)

Happy New Year!

[Davidk]

Re: Time picker

Yes... I see the same... Firefox isn't showing the time picker control... IE isn't either. Live and Working preview don't show, but that makes sense.

It's a good thing then, that Safari is running on an iOS mobile device and shows an excellent time picker control... as does Chrome under Android.

Cheers.

[nlk10010]

Re: Time picker

David:

It appears to be a problem, not with "am/pm" but with time values with hour parts less than 13 (again, just from my experimentation). I've tried forcing a value into the control in the "OnDetailViewPopulate Javascript" event of my time field and the Html5 control displays it properly as long as the hour part is 13 or greater; e.g. 13:13:00 displays properly as 1:13 PM but if you try 03:03:00 then the control seems to try to interpret it as a date. In particular, as a text box, "03:03:00" comes up as exactly that and as 1:13 PM in Chrome Desktop or Safari/Chrome mobile. If you try '03:03:00' then a textbox shows '03/03/2000', Html5 chokes and displays nothing. I think.

The spinbox solution is getting to look better and better.

[Davidk]

Re: Time picker

Nope... it's the format of what you're working with. You've changed your base setup now, having gone to a Detail View of the List control.

Before you were working with SQL Data. Now you're working with List Data. In general, you need to understand the nature of the data you're working with... which may change slightly. Dates and Times are, overall, horrible things. They are a bane. Is it an Object? Is it a String? It depends on where you are and what you're doing. But... Alpha helps to ease the pain. (I think that rhymes)

Working with a Detail View and the onDetailView Populate Javacsript event means that we are working with data from the List control. This event gives us this._value to work with... which is a string. Looking at this._value we see...

"10/01/2015 03:30:00 00 am"

But... we don't want the date and parts of the time... we only want hours and minutes. So we must arrange to get what we want. The easiest way is to use Alphas .toFormat and .fromFormat methods.

var t1 = new Date();
t1.fromFormat(this._value,'dd/MM/yyyy hh:mm:ss am');
var t2 = t1.toFormat('0h:0m');
return t2;

Here we establish a new Date object. By default it will have today's date and time in it. We then assign our own List date to our new object using .fromFormat. t1 now looks like this... a nice date object with our date...

Sat Jan 10 2015 03:30:00 GMT-0500 (Eastern Standard Time)

Next we just change it back to a string... using .toFormat... but only taking what we want... zero filled hours and minutes... and we return that to the detail control.

"03:30"

And finally... you can get rid of the Display format on the TimeDelivered textbox control. It's not needed.

[nlk10010]

Re: Time picker

Let me see if I've got this straight.

From OnDetailViewPopulate you're returning the string "03:30", correct? Cutting through a lot of other stuff, suppose I simply entered the following line in "OnDetailViewPopulate": return '03:30';. Shouldn't that work as well?

Because I'm pretty sure I tried that and it did not work with the hour part less than 13.

Inquiring minds want to know.

[Davidk]

Re: Time picker

You bet... I set return '03:35' and the TimeDelivered display is 03:30 AM. If I set return '13:35' the TimeDelivered display is 01:35 PM.