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

Default values and field icons

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

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

Set default to the current time

Autopopulate a Time field with the current time by following the steps below.

1. Set the clock settings step to 1 (min).
2. Select the time format that you want to use for the current time.
3. In your Time field Default value setting, insert the [time] shortcode. Depending on your selected Time Format, use one of these two default values:
   • Use with 24 hour clock time format, e.g. 13:09

     [time format='H:i']

   • Use with 12 hour clock time format, e.g. 1:09 PM

     [time format='g:i A']

   • If you would like 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, e.g. 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 click here, scroll down to the parameter section and look under 'Time'.

Set up a Time Range

The Time Range feature lets your users select a start and end date from a single calendar field, which is great for things like event bookings, travel dates, 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.

Allow unique booking per time slot

If you're using a Time Range field for scheduling, you might want to prevent multiple users from booking the same time slot on the same day. You can easily do this by linking your time field to a date field.

1. Add a Date field. If you haven't yet, make sure that a date field has been added to your form.
2. Enable the Unique Option. Go to the Field Options for the time field and select the Unique checkbox.
3. Link to a Date Field. Once you have enabled the Unique option, a new dropdown menu will automatically appear. Select the ID of the Date field you want to link your time slots to.
4. Once this is setup, this will ensure that a time slot already selected for a specific date is no longer available for other users to choose, preventing any double-bookings.

Limit form to one time slot per day

One of the most common scenario is a booking form. In the case where you want your users to book a time slot on different days, you can use the approach below.

1. Add a Date field to your form.
2. Add a Time field and mark it as unique.
3. Once you have enabled the Unique option, a new dropdown menu will automatically appear. Select the ID of the Date field you want to link your time slots to.
4. Select the Show a single time dropdown checkbox.
5. When a user fills out the form with a date and a time, that time slot would be unique and can only be selected by one user. When another user fills out the form, the previously selected time slot will be disabled and greyed out.

Calculate time difference

If you want 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.