Time picker

Hi,

I made a booking form for my site, and it is perfect, except for the time picker. The display window is to small for the font, and I only see half the number. Can someone let me know where to find the css for the time picker, or how to change that?

I notice in the js file that there is an option to have the time displayed in a 12 hour clock with AM/PM, is there an easy way to change it from the 24 hour clock to the 12 hour clock display?

Also, is there a way that when a time is selected, that only the hour and minute will display in the field, not the seconds? I'm concerned it makes it a little confusing for the users.

My site page to see it is http://www.oodaiden.com/dev003/index.php/2013-08-24-15-36-43/bookings

UPDATE:
I added a height value in line 95 of the time picker css file, at this path, /components/com_chronoforms/js/datepicker_moo/datepicker_jqui/datepicker_jqui.ccs

It fixes the window display size problem, but not sure how permanently with updates that may overwrite it. If there is a better way, would appreciate feedback.

Thank you in advance. 🙂

Hi daidensacha,

There are a couple of settings in the bootstrap.css file around lines 884 and 6755 that are affecting the form and this window height in particular. You can add an override using a Load CSS action in your form instead of hacking the core files. There's an example (for a different problem) in this FAQ.

Bob

Thank you. That helps a lot. I removed the css from the component css, and added a height to the my template custom css. Works a treat.

.datepicker_jqui .time .hour,
.datepicker_jqui .time .minutes {
height:35px;}

On the note of the seconds that display when the time is picked, is there a way to have only the hour and minutes showing?

I get this in the text box, "20:45:49". I would prefer it to be "20:45", or much better "8:45 PM".

Hi daidensacha,

You can set the date (or time) format in the DatePicker options - from memory I think you need format: '%H:%M' or format: '%I:%M%p'

Bob

PS More format info here

Thank you, I managed to set the time output display to 10:15 AM by adding [format: '%I:%M %p'] in to the date time picker config. It works now.

If its ok to ask in this string, is it possible to set the minutes to 5 minute increments? i.e. 5, 10, 15 etc?

This is fun, learning heaps, thanks.

The answer was in adding this to output the time as mentioned above, and also to format minutes in 5 minute increments.

format: '%I:%M %p', timeWheelStep: '5'

Awesome!!

Hi daidensacha,

Well done :-)

Bob

Sorry to bug you, if its any consolation I learn a lot by this, and really appreciate it.

I'm having another small problem, with both the default MonkeyPhysics, and Mootools Datepickers. Either way I cannot get it functioning properly.

MOOTOOLS DATEPICKER
I presently have it set to the Mootools because at least I can get the output to show as I want it, in one field. Problem is that after selecting the date and time, the calendar doesn't close. This is the one thing between it being complete.
DateTime Picker config format: '%a %d-%B at %I:%M %p', timeWheelStep: '5'
Form/Events/Custom Mootools Datepicker
Extra options extension:'%a %d-%B at %I:%M %p', timeWheelStep: '5'
Date format shown: %a %d-%B at %I:%M %p

Link to see this is http://www.oodaiden.com/dev003/index.php/2013-08-24-15-36-43/bookings

MONKEYPHYSICS DATEPICKER
When I use this version the calendar works well, and disspears as it should when the date is selected. Here I have a problem with the output in the form though, it only shows the default date and time format. I tried this.
DateTime Picker config format: inputOutputFormat: 'd M g:i A', timeWheelStep: '5'
Extra options extension: inputOutputFormat: 'd M g:i A', timeWheelStep: '5'
I tried everything I could in the output fields to no avail.

I would like one of them working if it is possible, very happy for suggestions.

Hi daidensacha,

1) Don't use the MonkeyPhysics calendar. It hasn't been updated to work with the current releases (1.3 + I think) of MooTools.

2) The problem with the MooTools calendar isn't that it doesn't close but that there are two calendars attached to the input (see the image below). This happens because you have two classes in the input: 'booking_date_time' & 'cf_date_picker' both of which add calendars. (This is a ChronoForms bug that doesn't remove the default class when you add a custom one.) The simplest fix is to use an ordinary Text Box element for the datepicker and add your custom class to that.

Bob

Hey Bob, thank you, your support is awesome. I just removed the class names, as I can use the default one in needed, but I don't think I will. I just thought it needed that in there for the action to link to the form field. Thats fixed.

Is there a bug with the time scroll? It seems to scroll backwards ok, but not forwards. It gets to 5, then jumps back to 55, and repeats that if I try to scroll upwards through the minute times.

Thank you.