How to Customize the Date / Time Field in WPForms

Would you like to make changes to the appearance of the Date / Time field in your WordPress forms? The Date / Time field is an easy, intuitive way to let your users schedule appointments and more.

In this tutorial, we’ll show you how to tailor this field in WPForms.


Before you dive into the tutorial below, make sure WPForms is installed and activated on your site. Then verify your license if you haven’t already.

You’ll also need to create a new form or open an existing one for editing and add a Date / Time field to it. Once you’ve done so, click on the field in the preview area of the builder to open its Field Options panel.

The Date / Time field options

Editing the Field Label and Description

In the Date / Time field options, you can customize the field labels and their visibility, as well as add a description.

Customizing the Field Label and Sublabels

By default, the field label will be Date / Time. Additionally, if you have both the Date and Time sub-fields displayed, there will also be a sublabel beneath each field.

The default label and sublabels for the Date / Time field

You can customize the field label by entering your text in the field provided.

Customizing the Date / Time field label

The Date and Time sublabels are not customizable.

Hiding the Field Label and Sublabels

You can remove any of the labels in your Date / Time field from within the Field Options panel. To do so, click on Advanced, then scroll to the bottom of the panel and toggle on the Hide Label and Hide Sublabels settings.

Hiding the label and sublabels for a Date / Time field

Note: Even if you hide the field label, we still recommend entering one in the General field options so that this field will be easier to identify in your form’s entries.

Adding a Description

You can also add a description to your Date / Time field to provide more context or information to your users. Just enter your desired text in the field provided in the General field options.

Editing the Date / Time field description

This description will appear directly below the input boxes on the frontend of your site.

A Date / Time field description on the frontend

Note: If you’d like to include any HTML (such as links) in your description, you can add the HTML code directly into the Description box.

For more details on how to add an HTML link to your forms, be sure to check out our guide on how to add extra text and descriptions to your forms.

Displaying the Date, Time, or Both

Within the Date / Time field, you have the option to display just the Date sub-field, just the Time sub-field, or both sub-fields.

You can change which sub-field(s) you want to display using the Format dropdown in the Field Options panel.

Choosing the Date / Time format

Within this dropdown, you can choose from the following options:

  • Date and Time
  • Date
  • Time

Note: If you’d like to show the Date / Time field based on user input in other fields, be sure to check out our conditional logic tutorial.

Requiring the Field

To make sure your users must select a date or time before submitting your form, turn on the Required setting in the field options.

Requiring the Date / Time field

Selecting a Field Size

The Field Size option is in the Advanced tab of the Field Options panel. It determines the width of the Date and Time sub-fields. You can select from Small, Medium, or Large.

Choosing the field size for a Date / Time field

This option is especially useful when setting up a multi-column form.

Changing the Date Display

There are several display options that you can customize for the Date sub-field: Type, Placeholder, and Format. To access these options, open the Advanced tab in the Field Options panel.

Opening the advanced options for the Date / Time field

Type

The Date sub-field has two different display types you can choose from: Date Picker or Date Dropdown.

Date Picker

The Date Picker option will create a calendar popup from which your users can select a date.

A WPForms date picker

Date Dropdown

The Date Dropdown option will show 3 dropdowns from which users can select values for the month, day, and year.

The Date Dropdowns on the frontend

Placeholder

The Placeholder option allows you to set placeholder text that will be shown in the Date / Time field if you use the Date Picker type.

A Date sub-field with placeholder text

You can customize this text to add further clarity to your forms, such as directing users to select a date. Just enter your placeholder in the field provided in the Advanced tab of the Field Options panel.

Entering placeholder text for a Date field

Note: Looking for more guidance on adding placeholder text to your Date / Time field? Check out our full tutorial on the placeholder option.

Format

By default, the Date sub-field has several built-in options for how it can format a date. These include:

  • M/D/Y: Formats the date numerically by Month/Day/Year.
  • D/M/Y: Formats the date numerically by Day/Month/Year.
  • Month, Day, Year: Formats the date in a string containing the full Month, Day, and Year.

Select your preferred format from the dropdown.

Setting the Date field format

Changing the Time Display

The Time sub-field also has options that you can customize, including the Interval, Placeholder, and Format.

Interval

This setting allows you to choose what intervals time options appear in. Built-in options for this setting allow times to be shown in 15, 30, or 60-minute increments.

A Time field with 30-minute intervals

By default, the interval will be set to 30 minutes. Use the dropdown in the Advanced tab of the Field Options panel to change it if you wish to.

Setting the Time field interval

Note: If you’d like to add more interval options to your forms, be sure to check out our developer documentation for more details.

Placeholder

The Placeholder option allows you to set placeholder text that will appear in the Time sub-field when your users open your form. For example, you can use this setting to direct your users to select a time.

A Time sub-field with placeholder text

To customize the Time placeholder, simply enter your desired text in the field provided in the Advanced tab of the Field Options panel.

Adding placeholder text to a Time field

Format

The Time sub-field has two different options for how the time is formatted: 12-hour or 24-hour.

The time format options

Note: If you’d like to customize the time format beyond the built-in options, be sure to check out our developer documentation for more details.

12h Format

Choosing a 12-hour format will show available hours as 12:00am to 12:00pm.

A Time field with a 12-hour format

24h Format

The 24-hour format will show available hours as 0:00 to 23:00.

A Time field with a 24-hour format

Limiting Available Dates and Times

If you’d like more control over which dates your users can choose from, you can customize the available options in several ways, including limiting the available days, disabling past dates, and limiting the available hours. These settings are all available in the Advanced field options.

Limiting Available Days

Note: You can only limit available days if you use the Date Picker type.

In order to choose which days of the week are available for your users to select, toggle on the Limit Days setting.

This will reveal a set of checkboxes for the days of the week. If you want to prevent users from choosing a specific day of the week, simply uncheck its box to disable it.

Limiting available weekdays in the Date / Time field

Note: If you would like to limit the date options users can choose, make sure to check out our developer documentation for more details.

Please keep in mind the custom snippets for limiting options in the Date / Time field cannot be combined with the built-in settings. You will need to turn off all the limiting options for your field before adding the snippets to your site.

Disabling Past Dates

In addition to limiting available days, you can also stop users from selecting past dates within your forms. To do this, toggle on the setting labeled Disable Past Dates.

Disabling past dates for the Date / Time field

When a date is disabled, it will be greyed out on your site, and will not be clickable.

Disabled dates in the date picker

Limiting Available Hours

If you’d like, you can customize which hours your users can select from within your forms. To do this, toggle on the Limit Hours option.

This will reveal dropdowns for the Start Time and End Time of your available hours. Choose your preferred times to set the available range.

Limiting hours for a Date / Time field

On the frontend of your site, only times between your selected Start Time and End Time will be available for your users to choose from.

That’s it! Now you can customize the Date / Time field for all your forms.

Next, would you like to learn about the advanced customization options available for other field types in WPForms? Check out our tutorials on the Dropdown, Checkboxes, and Multiple Choice fields for all the details!