PDA

View Full Version : Time picker


ABC123

Steve Workings
05-26-2013, 08:19 AM
Anyone have a solution for this?

I have a lot of components with time-pickers for short-time fields. But I can't find the correct combination of properties for the time-picker fields for the selectors. And, in each case, I have a default value.

For instance:

If I select the HTML5 type = time, then I get this:

iPad picker works find
There's no default value in Chrome desktop
There's no picker at all in Firefox

So, I leave HTML5 type = time and check the box to supply t Time Picker (the "old" method) and:
iPad choice boxes for the picker appear and disappear as soon as they're selected. Impossible to use
Works fine on Chrome desktop
Works fine on Firefox desktop

I can't find a single combination of properties that always supplies a useable picker. Sure, I could program the stuff, but we're talking probably 30 time pickers right now, with more cross-platform components to come, and there must be a better way.

Lance Gurd
05-26-2013, 12:58 PM
I downloaded the notes app and had a play with that earlier. It has a really good use of a spin control for date and time pickers. Worth looking at.

Steve Workings
05-26-2013, 04:50 PM
Thanks Lance. I just tried the spin control and the field doesn't even display in my desktop Firefox or Chrome.

Davidk
05-26-2013, 07:22 PM
I'd say it's a bit of a bug that the Alpha Time Picker selections disappear... they shouldn't. For the Alpha Time Picker not sticking it doesn't seem to matter if HTML 5 = time or not... the Time Picker still will not stick on an iPad.

Also, with data in a grid, with HTML5 = time, without the Alpha Timer Picker selected, on an iPad... the time does not display in the field. The field is blank. You can select a time with the iPad default IOS Time Picker, and as you select a time, that time is displayed in the field, but once submitted the field is cleared... even though it is saved.

Steve Workings
05-26-2013, 08:28 PM
I put a page up with a couple of configurations:

http://us.oerca.net/_timedemo.a5w

Anyone have time to go to it, see if you can confirm the inconsistent behavior and problems I describe on the page?

Steve Workings
05-27-2013, 08:27 PM
Bump. I would be most appreciative if one or two people can confirm the behavior differences I posted here. Thanks.

Terry
05-27-2013, 08:37 PM
Safari on OSX and Firefox on Win7 produce same behavior - A5 time field shows time picker and works fine (first field on your page). No access to picker for HTML5 time field - only displays default value (second field on your page).

On iPad, I see the same behavior for both Safari and Chrome for the A5 time field - choice boxes appear and immediately disappear. The html5 time field works fine using chrome on iPad.

Terry

Davidk
05-27-2013, 08:39 PM
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.

Tim Kiebert
05-27-2013, 08:56 PM
Steve,

I tested and found:

HTML5 type

iPad(safari) picker works fine
There is a default value in Chrome desktop. it has a little spin control(up/down arrows) in the field that allow the hours and minutes(when you click in them) to be adjusted. No pop like the ipad though.
There's no picker at all in Firefox

A5 Time Picker Only

iPad (safari)choice boxes for the picker appear and disappear as soon as they're selected. If I hold the touch a little longer (as opposed to a quick touch) then I can get the picker to stay on screen but still can not pick a time.
Works fine on Chrome desktop
Works fine on Firefox desktop

Steve Workings
05-27-2013, 09:21 PM
Thanks. I'm going to ask if they might take a look here.

pettechservices
01-27-2014, 12:28 AM
Hi all, any solution to this? I am testing this with the Alpha5 Date/Time picker, and on iPad, it still disappears in Safari....

mixter
05-30-2014, 09:40 AM
I know this thread is slightly old... but was this ever resolved?

To me it looks like the bug exists for Android.

I've got two Time Pickers on a UX

The hours and minutes dropdowns do appear and show the available choices...

but the problem is, you can't actually click/tap on any time values in the dropdown!

I have tested on Galaxy Tab 3 and Nexus 7 and both fail the same way.

You click a time in the dropdown and the dropdown disappears without registering a value.


I am thinking that perhaps I should forget about trying to use the time pickers and use some spin lists instead...

What is the Notes app that Lance mentions in post#2 above?

How are people getting their users to enter times via mobile device?

Lance Gurd
05-30-2014, 09:53 AM
Hi Michael,

The notes app is great for seeing the use of panel cards and different data entry methods for a mobile device, to see the videos and download the component go to http://news.alphasoftware.com/v12preview/ReleaseNotesV12.htm then search for notes app. It took me a while but I converted it to a MySQL database back end and now use it to make notes in my system.

DaveF
05-30-2014, 10:55 AM
Michael,

One technique that I use is to format the date and/or time in a textbox control and open a popup window when the textbox is clicked. I use spin list controls for the date and time parts and group them in a SpinListGroup.

38246 38245 38247

mixter
06-02-2014, 09:50 AM
Thanks for that Dave and Lance, I went with spin lists.

Would have saved me half a day if the time picker control worked on mobile the same way like it does with a mouse.

Anyway, looks fine now, and desired result achieved, probably slightly easier functionality for the users also, every bit helps...

And although I didn't really have the time to spare, at least I learned how to use spin lists!

nlk10010
12-30-2015, 01:52 PM
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
12-30-2015, 02:43 PM
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
12-30-2015, 04:31 PM
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
12-30-2015, 08:24 PM
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
12-30-2015, 09:33 PM
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
12-31-2015, 09:23 AM
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
12-31-2015, 02:16 PM
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
12-31-2015, 02:26 PM
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
12-31-2015, 03:42 PM
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
12-31-2015, 04:47 PM
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
12-31-2015, 05:15 PM
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
01-01-2016, 09:29 AM
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
01-01-2016, 11:54 AM
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
01-01-2016, 12:08 PM
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
01-01-2016, 12:34 PM
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.

nlk10010
01-01-2016, 12:45 PM
OK, well, then, something's wrong with my setup. I'll double-check in Chrome (desktop) and Chrome/Safari mobile.

Thanks much.

lgrupido
06-05-2017, 03:30 PM
I am having this same issue except with a date only field.

If you set the HTML5 type to Date, the picker works marvelously. Everything renders well.

BUT you can't set a default date in the field and you can't load data into the field.

When you try, you just see MM/hh/yyyy

You can then use the beautiful picker to pick a new date, but you can't see the current value of the date.

That is true if you set a default (=date()) or if you populate the control with a value using ux.populatefromtables.

Why even have that option if it isn't going to work!!!!

Davidk
06-05-2017, 03:54 PM
Larry, I can't reproduce what you're seeing. I'm assuming a typo in MM/hh/yyyy. There's a bit of info missing here. Bound UX? Alpha version/build used? Web app/PGB app?

When I create a data bound UX, including a Date Field, I set the HTML5 type to "date". I can set a Default value of =date(). When I click New Record, today's date shows.

I'd assume your UX Date format is set to match your server.

Can you post a sample UX showing the issue?

lgrupido
06-05-2017, 04:07 PM
I'm working on a sample

However, it works fine when in working preview.

You actually have to publish it to an a5w page for it to not work.

This is all I'm doing:

Create a UX with a date field. Set the initial value to =date()

Set the datefield to html5 and turn off the date picker. (otherwise, you get two calendars...)

Run it in working preview - works great.

Do save page and put it into an a5w page. Publish.

Now try it in Chrome.

Actually, it looks OK in Firefox and Explorer now that I take a look - seems like only Chrome has the issue, but, of course, anyone using an Android phone is using Chrome ...

Davidk
06-05-2017, 04:27 PM
Ok... now we have some important info... you've turned off the Date/Time Picker. You're working with an A5W page. And you're working under Android... or are you tests using Chrome desktop?
We still don't know what Alpha version/build you're using.

Under Chrome desktop, the Date Control Date/Time picker icon is gone. You hover over or click into the control and a "less than nice" set of icons is displayed. The control shows "mm/dd/yyyy". Clicking on the icons shows a terrible date picker.

Under FireFox, there is no Date/Time picker icon, although the date is correctly displayed... and the default date works.

With the Date/Time picker checked... all looks and works ok... no 2 Calendars displayed.

lgrupido
06-05-2017, 05:11 PM
But you need to use the html5 default date picker in order for it to work well on mobile devices.

If you use the standard date picker, the calendar does not fit properly on the screen and you can not properly select the dates.

Try that date picker you get in chrome on a mobile device with a smaller screen and you will see what I mean.

Plus the stupid keyboard won't pop up and get in your way every time.

lgrupido
06-05-2017, 05:29 PM
David

On your phone (in chrome), go to this page and test out all three of the dates.

https://interpretek.us/testhtml5date.a5w

If you have an Android phone using chrome you will see what I mean.

I want a date picklist that works like the top one on all browsers.

If I need to do one page for mobile and one page for desktop I can do that.

However, it doesn't even seem to work consistently that way.

Davidk
06-05-2017, 06:17 PM
Ok... thanks... now I can see what you're working with... and can duplicate it.

The HTML5 "date" type requires a specific format... yyyy-MM-dd. So... your Default value setting will be...


=date_format(DATE(),"yyyy-MM-dd")

Don't worry... it formats correctly based on your device settings.

lgrupido
06-05-2017, 07:50 PM
Well, that makes it work totally acceptably in Chrome, but the same thing in Firefox (on a browser) doesn't work.

And in Chrome it puts up the correct date format, but in Firefox it does not ...

(I have updated the component online with your suggestion as an example.)

Davidk
06-05-2017, 08:27 PM
No... that's correct... FireFox and IE don't support the Date input type. I feel something is missing here, however. You want to use Chrome or Firefox on an Android device?

Or is it that you want to run the same web page on an Android device and on any desktop browser?

lgrupido
06-05-2017, 09:24 PM
I would like to be able to run the same page on an Android device or any desktop browser.

Everything else works fine. I have several other controls that are working and formatting correctly - it's just the date calendar lookup that is messing things up.

Isn't there something that will work or am I looking for a unicorn?

Davidk
06-07-2017, 12:00 AM
Larry... are you still interested in doing this? If so... do you care if the jQuery DatePicker Calendar is shown for desktop browsers instead of the Alpha Calendar?

Khanafi
06-07-2017, 02:39 AM
just try play using pre release version 12.4.4.4 build 4355
all fields set default value to 23:52

1. HTML5 type time
43551
in desktop it display like arrow
in android it display like clock

2. HTML5 type not set, Using a5 time picker
in desktop it display dropdown , click able using mouse pointer
in android it displays dropdown, clickable with tiny click area
43553

3. HTML5 type time, Using a5time picker same behaviour as no. 1
with white tiny clank pop up on the bottom left

43554


for value into alert:
11:52AM
43555

11:52PM
43556


Preview web browser http://smg.datadrivensystems.co.uk/latihan/deadbite/mermaid/clock.a5w
apk android : https://drive.google.com/open?id=0B6avuFOZWTHXdTdYSjVpeFdKUlE


Have a good day!

lgrupido
06-07-2017, 07:42 AM
David,

I think that would be fine - I don't see any reason why it would be a problem, so long as it works!

lgrupido
06-07-2017, 11:59 AM
Khanafi,

If your reply is for me, I don't have a time issue - my problem is with dates.

For times, I just give them an hours control and a minutes control to type in the time, then I build it myself from the parts.

I have never seen a reason to provide a lookup for hours and minutes.

Davidk
06-08-2017, 06:44 PM
Have a look here for a continued discussion about a TextBox control Date Picker running under Android and desktop browsers:

https://www.alphasoftware.com/alphaforum/showthread.php?120420-Android-and-Cross-Browser-TextBox-Date-Picker&p=726213#post726213