### [Customizing the Date / Time Field](https://wpforms.com/docs/how-to-customize-the-date-time-field-in-wpforms/)

**Published:** November 26, 2023
**Author:** Umair Majeed

**Excerpt:** Learn how to change the appearance of the Date / Time field.

**Content:**

Date / Time Field is a Basic Feature

 Unlock Date / Time Field and other powerful features to grow your business.

 [ Get WPForms Basic ](https://wpforms.com/pricing/) 

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.

This tutorial will show you how to tailor this field in WPForms.

- [Editing the Field Label and Description](#label)
- [Displaying the Date, Time, or Both](#display)
- [Requiring the Field](#require)
- [Selecting a Field Size](#size)
- [Changing the Date Display](#date)
- [Changing the Time Display](#time)
- [Limiting Available Dates and Times](#limit)

Please enable JavaScript in your browser to complete this form.

##### Try this Form Demo!

Email \*

Choose an appointment date \*

Date

Time

Submit![Loading](https://wpforms.com/wp-content/plugins/wpforms/assets/images/submit-spin.svg)

 Check out our [Dentist Appointment Booking Form Template](https://wpforms.com/templates/dentist-appointment-form-template/) to see a live preview of the Date / Time field.

---

Before you dive into the tutorial below, make sure WPForms is [installed and activated](https://wpforms.com/docs/install-wpforms-plugin/) on your site. Then [verify your license](https://wpforms.com/docs/verify-wpforms-license/) if you haven’t already.

You’ll also need to [create a new form](https://wpforms.com/docs/creating-first-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](https://wpforms.com/wp-content/uploads/2021/02/date-time-field-options.png)## 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](https://wpforms.com/wp-content/uploads/2021/02/date-time-labels-1.png)You can customize the field label by entering your text in the field provided.

![Customizing the Date / Time field label](https://wpforms.com/wp-content/uploads/2021/02/customize-date-time-label.png)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](https://wpforms.com/wp-content/uploads/2021/02/date-time-hide-label-sublabels.png)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](https://wpforms.com/docs/complete-guide-to-form-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](https://wpforms.com/wp-content/uploads/2021/02/date-time-edit-description.png)This description will appear directly below the input boxes on the frontend of your site.

![A Date / Time field description on the frontend](https://wpforms.com/wp-content/uploads/2021/02/date-time-description-example-1.png)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](https://wpforms.com/docs/how-to-add-extra-text-and-descriptions-to-forms/#html-field).

## 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](https://wpforms.com/wp-content/uploads/2021/02/date-time-format.png)Within this dropdown, you can choose from the following options:

- Date and Time
- Date
- Time

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](https://wpforms.com/docs/how-to-use-conditional-logic-with-wpforms/) 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](https://wpforms.com/wp-content/uploads/2021/02/require-date-time-field.png)## 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](https://wpforms.com/wp-content/uploads/2021/02/date-time-field-size.png)This option is especially useful when setting up a [multi-column form](https://wpforms.com/docs/how-to-create-multi-column-form-layouts-in-wpforms/).

## 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](https://wpforms.com/wp-content/uploads/2021/02/date-time-advanced-options.png)### 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](https://wpforms.com/wp-content/uploads/2021/02/date-picker-2.png)#### 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](https://wpforms.com/wp-content/uploads/2021/02/date-dropdown-1.png)### 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](https://wpforms.com/wp-content/uploads/2021/02/date-placeholder-example-1.png)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](https://wpforms.com/wp-content/uploads/2021/02/add-date-placeholder-text.png)Looking for more guidance on adding placeholder text to your Date / Time field? Check out our full tutorial on the [placeholder option](https://wpforms.com/docs/how-to-add-placeholder-text-to-a-form-field/).

### 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.
- **Y/M/D:** Formats the date numerically by Year/Month/Day.
- **M.D.Y, D.M.Y, Y.M.D:** The same formats as above, but using periods instead of slashes as separator.
- **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](https://wpforms.com/wp-content/uploads/2021/02/date-format.png)To automatically set a default date in your Date Picker, such as today’s date, refer to our [developer documentation](https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/) for guidance. You can also find its code snippet in the [WPForms code snippets](https://wpforms.com/docs/using-wpforms-code-snippets/) library.

## 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](https://wpforms.com/wp-content/uploads/2021/02/time-12-hour-format-1.png)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](https://wpforms.com/wp-content/uploads/2021/02/time-interval.png)If you’d like to add more interval options to your forms, be sure to check out our [developer documentation](https://wpforms.com/developers/how-to-create-additional-intervals-for-the-date-time-field-time-picker/) 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](https://wpforms.com/wp-content/uploads/2021/02/time-placeholder-example-1.png)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](https://wpforms.com/wp-content/uploads/2021/02/add-time-placeholder-text.png)### Format

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

![The time format options](https://wpforms.com/wp-content/uploads/2021/02/time-format.png)If you’d like to customize the time format beyond the built-in options, be sure to check out our [developer documentation](https://wpforms.com/developers/how-to-create-additional-formats-for-the-date-time-field-time-picker/) for more details.

#### 12h Format

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

![A Time field with 30-minute intervals](https://wpforms.com/wp-content/uploads/2021/02/time-12-hour-format-1.png)#### 24h Format

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

![A Time field with a 24-hour format](https://wpforms.com/wp-content/uploads/2021/02/time-24-hour-format-2.png)## 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

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](https://wpforms.com/wp-content/uploads/2021/02/limit-days.png)If you would like to limit the date options users can choose, make sure to check out our [developer documentation](https://wpforms.com/developers/customize-the-date-time-field-date-options/) 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](https://wpforms.com/wp-content/uploads/2021/02/disable-past-dates.png)When a date is disabled, it will be greyed out on your site and will not be clickable.

![Disabled dates in the date picker](https://wpforms.com/wp-content/uploads/2021/02/disabled-past-dates-1.png)### 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](https://wpforms.com/wp-content/uploads/2021/02/time-limit-hours.png)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.

If you’re looking to enable date range selection or multiple date choices in the Date Picker, refer to our [developer documentation](https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/). Additionally, you can find the relevant code snippets for this purpose in the[ WPForms code snippets](https://wpforms.com/docs/using-wpforms-code-snippets/) library.

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](https://wpforms.com/docs/how-to-customize-the-dropdown-field-in-wpforms/), [Checkboxes](https://wpforms.com/docs/how-to-customize-the-checkboxes-field-in-wpforms/), and [Multiple Choice](https://wpforms.com/docs/how-to-customize-the-multiple-choice-field-in-wpforms/) fields for all the details!

**Categories:** Fields, Field Customizations

---