Question

Restrict Time Range in Date Picker

Forms

Updated September 22, 2022

asked on January 3, 2019

Hello,

I'd like to restrict the time selection drop down options on the date-time selector to only display 8:00 to 5:00 and only allow a time range from 8:00am to 5:00 pm..

My first attempt was to apply a the min and max attributes to the time portion of the field, for example:

$('.startdate .cf-date-field-time input').attr('min',"08:00");

$('.startdate .cf-date-field-time input').attr('max',"17:00");

but the result only displays time choices of 8:00 - 11:00. The validation of 8am to 5pm does work though.

Any suggestions on how to achieve this is appreciated.

Thanks

2 0

Replies

replied on January 3, 2019

There is an option on the time layout to configure ranges:

1 0

replied on January 3, 2019

Thanks for the reply Andrew.

1 0

replied on September 22, 2022

Is there a way to force PM (make it the default)?

1 0

replied on September 22, 2022

Hello again,

I found a low tech alternative that worked for my room reservation form. Set up a table with Start Time and End Time dropdown list columns.

Set up the allowable times as choices in the drop downs.

Not good for use cases needing time calculations, but I did not need that for this form, so it was a good workaround for me.

Hope this helps someone along the way.

0 0

replied on January 3, 2019 • Show version history

With the standalone Time field, it will only show 8-11 when AM is selected, then if you change it to PM it would give you the 12-5 option.

However, the time field included in the Date field when "Show Time" is enabled seems to lack the event handler responsible for facilitating that behavior.

I'm not sure this is necessarily a bug since the Date + Time field doesn't include support for restricted time range in the configuration yet, but it definitely complicates things.

1 0

replied on January 3, 2019

Thank for the reply.

I'm using JavaScript code on the Date w/ Time fields (there are two of them: a Start and an End date) to ensure the end date & time entered is not before the start date & time.

I can use the separate date and time fields if the functionality for the restricted time range does not exist in the combo field, but will have to modify the script logic to achieve to achieve the same validation.

I'll look around to see if anyone else has been successful at this, but if you have any suggestions /or a solution you've already developed I would appreciate your feedback.

Thanks

1 0

replied on January 3, 2019 • Show version history

This is behaving like a bug. I can put in the min & max with javaScript:

  $('#DateTimeField453').attr('max',"05:00:00 PM");
  $('#DateTimeField453').attr('min',"08:00:00 AM");

^ I toyed with changing the format to 08:00:00 to 17:00:00 and that didn't help.

The min max validation works in the field:

However, the issue that Ken is referring to is that the dropdown list of hours to choose from changes to only 08:00:00 to 11:00:00 only.

You can manually type in different hours and they get validated the same as the image above. The issue is the dropdown. The HTML does not have a list of <options> to edit with javaScript.

<input type="text" id="DateTimeField453" name="DateTimeField453" aria-labelledby="DateTimeField453" 
class="cf-small hasTimePicker cf-small ui-timepicker-input parsley-error" 
min="08:00:00 AM" max="05:00:00 PM" timepattern="hh:mm:ss a" vo="e" 
list="timePickerDatalist453" data-parsley-valid-format="time" data-parsley-id="171" 
autocomplete="off">

Hopes this flesh out the problem.

0 0

You are not allowed to follow up in this post.

Question

Question

Restrict Time Range in Date Picker

Replies

Sign in to reply to this post.