Question

Time Selector

Forms

Updated September 12, 2019

asked on August 1, 2014

Does anyone have a recommendation on a good time selector or time picker for use with Forms? The use case example would be someone completing a form for a meeting room reservation. Sample JavaScript would be greatly appreciated.

Thank you,

Cindy Stewart

0 0

Answer

SELECTED ANSWER

replied on August 1, 2014 • Show version history

I've used this one and it works pretty well. For reserving a meeting room, I'd suggest using two single line input fields in the form to represent the start and end times. Give the fields the css class, meeting.

The example javascript code would be

$(document).ready(function () {
    $.getScript('http://server/forms/js/jquery.timepicker.js', function() {
        $('.meeting input').timepicker({ 'step': 15, 'scrollDefault': 'now' });
    });
});

I like the 15 minute step option while also defaulting to the current time.

Be sure to use the included css to make the drop down look nicer. For the .ui-timepicker-wrapper width, 10.5 em fits well with a small form field width.

0 0

View 2 previous replies

replied on January 4, 2017

Hi Alex,

Just wanted to ask, I am using Forms version 10 and adding this time picker. I can see the list but when i select a time, the field is not being populated? Is there something I am missing?

I have just added a single line to confirm as I have this in a table and it is doing the same thing?

Your assistance would be greatly appreciated.

Regards

Ziad

0 0

replied on January 4, 2017

This works fine for me in Forms 10.1. Try with a brand new business process and form that does not have any pre-existing CSS or JS. Then use the CSS from the jquery.timepicker.css file and the JS from above. In my test form that has a single line field by itself as well as a table with a single line field column, the time picker works fine when filling out the form and upon submitting, the values are retained properly.

0 0

replied on January 4, 2017

Hi Alex,

Thank you for this,

Just tried what you mentioned above, I have the CSS file copied in CSS area and the Javascript is as below:

$(document).ready(function ()
{
$.getScript('http://localhost/forms/js/jquery.timepicker.js', function()
{
$('.abc123').timepicker({ 'step': 30, 'scrollDefault': 'now' });
$('.cf-table-add-row').click(function ()
{
$('.abc123').timepicker({ 'step': 30, 'scrollDefault': 'now' });
});
});
});

I can see the list but unable to pick it? It is a new Business Process and I tried it with only a single field also. I got one of my colleagues to try it as well, and we are both getting the same thing even though we tried different CSS class name as well.

Very strange this, and apologies in advance we are using the latest version of Forms as well.

Thank you

Ziad

0 0

replied on January 5, 2017

Use $('.abc123 input') in the JS and see if things work now.

1 0

replied on January 5, 2017

Hi Alex,

That was it. Adding the 'input' in the JS fixed the issue!

Thank you

Regards

Ziad

0 0

Replies

replied on August 1, 2014

Thanks Alex. I have that working and I think it is what the customer was looking for.

0 0

replied on February 17, 2015

I can't seem to get this to work in Forms 9.2?

0 0

replied on February 17, 2015

This example works fine for me in the latest version of Forms 9.2.0.908. Can you clarify what aspect isn't working?

Off the top of my head, I'd suggest confirming that there are no typos in your Javascript and that you are properly referencing the external .js file. Using valid CSS will also make the fields appear like proper drop downs. Also make sure your fields are using the proper class names.

0 0

replied on February 17, 2015 • Show version history

I just copied and pasted the example above, and changed the external link to ours: http://website/forms/js/jquery.timepicker.js and modified the .meeting input to .time input... And I changed it from .time input to .pto input and it works.. so I can't have that labeled as time I guess? Although the drop down boxes are not quite right?

0 0

replied on February 17, 2015 • Show version history

The last part about getting the drop down to look correct is because you need to also use valid CSS.

Make sure you're referencing the external CSS file that comes with the timepicker or just copy the valid CSS from that file into the CSS field in Forms.

0 0

replied on February 24, 2015

Thank you for the example. I am trying to get this to work in a table. The first table row works great, but additional rows do not populate the time dropdowns. Any ideas how to accommodate for a table?

0 0

View 1 previous reply

replied on February 24, 2015

need to make the reference more dynamic. If you set it up like the example, then you end up telling the code that this is 1 field, but in reality, a table means you may have multiple fields.

Cannot recall offhand though how we would do that, but if I can find it later when I have some free time I shall post it up here for you

0 0

replied on August 28, 2015

Just check for when a user clicks the "Add" button to add rows to a table.

$(document).ready(function () {
  $.getScript('http://server/forms/js/jquery.timepicker.js', function() {
    $('.meeting input').timepicker({ 'step': 15, 'scrollDefault': 'now' });
    $('.cf-table-add-row').click(function () {
      $('.meeting input').timepicker({ 'step': 15, 'scrollDefault': 'now' });
    });
  });
});

2 0

replied on November 6, 2017

I am having troubles applying this to a form I am testing. I copied and pasted the JavaScript and added the CSS class "meeting" and it still is not working for my Time field.

$(document).ready(function () {
$.getScript('http://server/forms/js/jquery.timepicker.js', function() {
$('.meeting input').timepicker({ 'step': 15, 'scrollDefault': 'now' });
});
});

The Time field still shows 12:00, 1:00, 2:00, etc.

1 0

replied on September 12, 2019

Unless you have the js in this location - http://server/forms/js/jquery.timepicker.js it will not work.

Instead test with the CDN link:

https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js

0 0

You are not allowed to follow up in this post.

Question

Question

Time Selector

Answer

Replies

Sign in to reply to this post.