Time Picker Settings
3 min
Add a field title to your time picker, set the time format, choose an input type, set specific default times and more.
Why should I enter a field title?
Field titles help site visitors understand what the input element is used for. To keep your site accessible for all visitors, we recommend always having field titles for your input elements.
Enter the text in the
Field title field that you want to display above the input element.
What time formats are available to use with the time picker?
Click the
Select a time format drop-down and choose from the following formats:
- 12H: Display times in a 12-hour format with AM and PM (e.g. 4:30 PM).
- 24H: Display times in a 24-hour format (e.g. 16:30).
What input options can I choose?
Click to select the input option you want your time picker to use:
- Text only: Visitors edit the time using their cursor and keyboard.
- Stepper: Visitors can edit the time using their cursor and keyboard or click arrows to adjust.
- Dropdown: Visitors click a drop-down to select the time.
Note: On mobile devices, the time picker uses the same standard time picker native to the mobile device's operating system.
What do the 'Show initial text' options do?
After choosing an input option for your time picker, select the relevant option under
Show initial text:
- Nothing: No initial time displays in the time picker.
- Placeholder text: (Dropdown input option only) Enter the text that you want to appear next to the icon in the Placeholder text field.
- Current time: Initially display the current time in the time picker.
- Specific time: Enter the specific time you want to initially display in the Set specific time field.
Can I set custom time increments?
Yes. Drag the
Time increments (minutes) slider to adjust the amount of time between time selections when using the
Stepper or
Dropdown input options.
Note: If you select
Specific time under
Show initial text, the time increment begins at that time. For example, if you set the specific time to 14:45, and the time increment to 30 minutes, the 1st time increment begins at 14:45 and the 2nd increment at 15:15, and so on.
How do I add hours that visitors can select from?
Click
+ Add Available Hours and enter a range of hours the visitor can select from. You can add multiple available hour slots.
Click
+ Add Unavailable Hours to enter a time range that visitors cannot select from. You can also add multiple unavailable hour slots.
What do the 'Required' and 'Read only' field type settings do?
Under
Field type, click the checkbox to make this input element:
- Required: Visitors must select a time before they can submit it. If you've created a custom form using other input elements, none of the inputs can be submitted until the user makes a selection in each required input.
- Read only: With 'Read only' selected, you can use the time picker to read and display a time from your connected CMS collection. Visitors can copy the time displayed. However, they cannot use the input to submit times to your CMS collection.
Hire a ProfessionalGet matched with a Wix Partner who can help you reach your site goals.
