The Time field is used to select a time from a dropdown field. The start and end time can be adjusted as well as the minutes between each time option.

Standard field options

Time fields have the following standard options.

• Required
• Unique
• Read Only
• CSS Layout Classes
• Default Value
• Field Description
• Visibility
• Label position
• Field Key
• Field Type
• Validation Messages
• Conditional logic

Field-specific options

Time range

The Time Range start and end boxes limit the Time field to the times between them. To set a range, enter a start time and an end time. The range is 00:00 to 23:30 by default, and both boxes use the 24-hour clock.

These boxes are different from the Time Range checkbox, which adds an End Time field.

See Set up a Time Range.

Step unit

The Step number sets the interval between the times in the field. By default, the step is 30 minutes. To change the unit, choose Minute(s), Second(s), or Millisecond(s) in the dropdown beside the step number.

The Time Range boxes follow the unit. With Second(s), enter times with seconds, such as 09:00:00. With Millisecond(s), add milliseconds, such as 09:00:00:000.

Time format

The Time Format dropdown sets how times show in the field. To change it, choose 12 hour clock or 24 hour clock.

The 12 hour clock is the default and shows times with AM and PM, such as 1:30 PM. The 24 hour clock shows the same time as 13:30.

• Select the Show a single time dropdown checkbox to show the time in one dropdown. This checkbox shows when the Step unit is Minute(s).
• Select the Automatic width checkbox to set the width of the time field automatically, based on its options. It changes the width of the single time dropdown.

Both checkboxes are unchecked by default.

Default values and field icons

Set a dynamic default value in your Time field. To retrieve a value from an entry, see the Get a Value From an Entry page. To set a default value, see the Default Values page.

Field action icons allow you to duplicate, delete, or move a field on the form builder page. See field action icons for more information.

Set default to the current time

To fill a Time field with the current time:

1. Set Step to 1 and keep Minute(s) selected.
   

   

2. Select the time format that you want to use for the current time.
3. Expand Advanced. In the Default Value box, insert the [time] shortcode.
   

   

   
   Depending on your selected Time Format, use one of these default values:
   • Use with 24 hour clock time format, such as 13:09: [time format='H:i']
   • Use with 12 hour clock time format, such as 1:09 PM: [time format='g:i A']
   • To round the value to the nearest 30 minutes and use a 30 minute step: [time format='g:i A' round=30]

Display Time fields

Display the value submitted in a Time field in a form's confirmation message, email, or View.

Shortcode options

• Display value: Display the value submitted in a Time field: [x]. Replace x with the ID or key of the Time field.
• Time Format: Change the format of the displayed time.
  • Display as a 24-hr clock format, such as 18:30: [x format='H:i']
  • Display with a lower case am/pm like 6:30 pm: [x format='g:i a']
  Replace x with the ID or key of the Time field. For more format options, see the PHP date() format characters and look under 'Time'.

Set up a Time Range

The Time Range feature lets your users select a start and end time with a pair of Time fields. It's great for things like event bookings, appointments, or any other scenario that requires a time frame.

1. Open the form you want to edit and add a Time field.
2. In the Field Options for the time field, select the Time Range checkbox.
3. When enabled, an End Time field will be added automatically next to the existing time field, which becomes the Start Time.
4. Click Update to save your form.

The two fields of a range work as a pair. The End Time field takes these settings from the Start Time field: Required, Unique, Read Only, Visibility, and the linked Date field. Change them in the Start Time field. In the End Time field they're locked, with a note that shared range settings can only be changed in the start time field.

Allow unique booking per time slot

When you use a Time Range field for scheduling, you can prevent multiple users from booking the same time slot on the same day. To do this, link your time field to a date field.

1. Add a Date field. If you haven't yet, add a date field to your form.
2. Enable the Unique Option. Go to the Field Options for the Start Time field and select the Unique checkbox (2). The End Time field takes this setting from the Start Time field. The options panel then shows the End Time field, so click the Start Time field again to see its options.
   

   

3. Link to a Date Field. After you select Unique, the Linked Date Field dropdown appears (3). Select the ID of the Date field you want to link your time slots to.
4. Click Update to save your changes.
5. When another user picks a time slot that is already booked for that date, the form shows an error on submit. This prevents double bookings. To grey out booked slots in the time list instead, also select Show a single time dropdown.

Limit form to one time slot per day

One of the most common scenarios is a booking form. When you want your users to book a time slot on different days, use the approach below.

1. Add a Date field to your form.
2. Add a Time field and select the Unique checkbox (2).
   

   

3. After you select Unique, the Linked Date Field dropdown appears (3). Select the ID of the Date field you want to link your time slots to. If you just added the Time field, the dropdown stays empty until the form is saved. Click Update (or Save on a new form). Then click the Time field again and select the ID.
4. Select the Show a single time dropdown checkbox (4). This checkbox shows when the Step unit is Minute(s).
   

   

5. Click Update to save your changes.
6. When a user fills out the form with a date and a time, that time slot is unique and can only be selected by one user. When another user fills out the form and selects the same date, the previously selected time slot is greyed out in the time dropdown. It can't be selected.
   

   

Calculate time difference

To calculate the difference between two time fields, use this code example.

Related developer hooks

• Black out time blocks with the frm_allowed_times snippet.
• Calculate total time with the frm_validate_field_entry snippet.
• Calculate total time inside a repeater with the frm_validate_field_entry snippet.