### [How to Customize the Date Time Field Time Picker](https://wpforms.com/developers/customize-the-date-time-field-time-picker/)

**Published:** January 17, 2020
**Author:** Editorial Team

**Excerpt:** This tutorial will show you how to limit the time picker for multiple different time slots to show your available open and close times. 

**Content:**

## Introduction

Would you like to customize the **Date / Time** field for the time picker in WPForms? The **Time Picker** provides the user with a list of times to choose from. These times can be changed so that only a specific time range is available. You can also provide a built-in option on the form builder to limit certain times.

To learn more about setting up a single limit for the time picker,[ please check out this documentation.](https://wpforms.com/docs/how-to-customize-the-date-time-field-in-wpforms/#limit-hours "How to Customize the Date / Time Field in WPForms")

In this tutorial, we’ll show you how to customize the time picker on the **Time** field to disable multiple times using a small PHP snippet.

## Creating your form

First, we’ll create a new form, add our fields, and add a **Time** form field.

If you need any help in creating your form, [please review this documentation](https://wpforms.com/docs/creating-first-form/ "How to Create Your First Form").

For our form, we’re going to use the options on the **Advanced** tab to **Limit Hours** to **8am to 5pm** for our office opening and closing time.

![create your form and set your limiting hours on the Advanced tab of the time field options](https://wpforms.com/wp-content/uploads/2023/01/wpforms-limit-hours.jpg)

## Adding the snippet

Next, we want to disable the time from **9am to 10am** for a daily company-wide meeting but we also want to disable the **12pm to 1pm** time slot which is the lunchtime hours as well. In order to do this, we need to add a snippet to our site.

There are three different ways this can be applied:

- All time pickers site-wide
- All time pickers inside a specific form
- A specific time picker inside a specific form.

Choose the code snippet that works for your needs and copy it to your site.

If you need help in how to add snippets to your site, [please see this tutorial ](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "How to Add Custom PHP or JavaScript for WPForms").

The time picker can be customized even further using the [options available](https://github.com/jonthornton/jquery-timepicker/blob/master/README.md "Timepicker Plugin for jQuery GitHub Repository") in the jQuery timepicker library.

#### All time pickers site-wide

Below will apply to all time pickers on the site.

```

/**
 * Limit the times available in the Date Time field time picker.
 *
 * @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
 */

function wpf_dev_limit_time_picker() {
    ?>

**Categories:** Tutorials

**Tags:** Date Time Field, JS, PHP

---