Divi Contact Form Helper

Documentation & Support

Docs » Divi Contact Form Helper » Date & Time Picker Settings

Date Timer Picker In The Divi Contact Form Helper Plugin by Pee Aye Creative

Date & Time Picker Settings

Overview

The Divi Contact Form Helper plugin by Pee-Aye Creative enables you to add a Date and Time Picker field to the Divi Contact Form module. Please note, this feature is not included in Divi and is impossible without our plugin, so we hope you enjoy this exciting feature! This guide will show you how to enable and use the features and settings related to date and time picker.

How To Add A Date/Timer Picker Field

Add New Field

The first step is to add a new field. You can do this by clicking the gray plus (+) button.

Add new field in the Divi Contact Form

Select Input Field Type

The Field Options toggle will open. In the Type dropdown, be sure to set the Type as Input Field

Divi Contact Form field type selector 1

Enable Date/Time Picker

After selecting the Input Field type, locate the Date Time Settings toggle and open it. There you will see a new setting which is added by our Divi contact Form Helper plugin called “Use As Date/Timer Picker.” Turn this toggle to YES to enable the date and/or time picker settings.

date and time picker settings in the Divi Contact Form Helper plugin

General

Choose Date/Time Picker Type

You can choose to use a combination date AND time picker, just a date picker, or just a time picker.

date and time picker type setting in the Divi Contact Form Helper plugin

Date/Time Picker Format

Depending upon the option that you have selected in Date/Time Type, the next option you will get is to set its format. This lets you decide how you want the date and time to look. If the option you need is not here, you can set a custom format in the Date and Time tabs.

custom date and time picker format settings in the Divi Contact Form Helper plugin

Custom Date Picker Format

This input field in the Date tab of the Date/Time Picker Settings allows you to enter a custom date format using your preferred PHP parameters. This will override and take priority over any other date format you have selected. To learn more about date formats, we recommend the blog post from Elegant Themes.

custom date format setting in the Divi Contact Form Helper plugin

Custom Time Picker Format

This input field in the Date tab of the Date/Time Picker Settings allows you to enter a custom time format using your preferred PHP parameters. This will override and take priority over any other time format you have selected. To learn more about time formats, we recommend the blog post from Elegant Themes.

custom time format setting in the Divi Contact Form Helper plugin

Show Date/Time Picker Inline

By default, the date/time picker will appear when the user clicks into the field. But if you want to show it as visible by default without clicking first, then enable this setting.

show date time picker inline setting in the Divi Contact Form Helper plugin

Set Input With Current Date/Time

This new setting lets you set the date/time picker input field placeholder as the current date/time on page load. 

Set Input With Current Date Time in the Divi Contact Form Helper Plugin

Set Date/Time Picker Language

The words in the date/time picker will show according to your Site Language set in WordPress General Settings. But if you want to override this, you can select the language to use per form.

set date picker language in the Divi Contact Form Helper plugin

Locale Direction RTL

We added a new setting to set the current locale right-to-left (RTL) for the date/time picker.

set locale direction right to left in the Divi Contact Form Helper plugin

ICS Calendar Sync BETA*

Some of you are going to love us! We added an awesome feature that allows you to synchronize the available dates and times in the date picker field and time picker field with your Google and Outlook ICS Calendar URL! Simply enter the URL of your .ics calendar feed and click the button to initiate it.

This setting can be found in the Date Time Settings in the General tab after enabling the date/time picker on an individual field. Adding a URL will automatically initiate the sync and the date/time picker dates and time swill be based on your Google or Outlook calendar. After the initial sync, whenever someone visits a page with the contact form module, it will run the ICS sync function.

When the ICS Calendar Sync is enabled, the settings for available and unavailable dates and times will be hidden, and the ICS URL will take priority.

Note that this a one way feed from your calendar to the contact form, so any dates submitted in the form will not update in the source calendar.

ics Google and Outlook calendar sync settings in the Divi Contact Form Helper plugin

You can check with Google and Outlook for full instructions on getting the URL, and there are various guides available online for other apps and software. Just go to the calendar settings and look for the iCal URL. In Google Calendar, you go to the main “Settings” then click an individual “Calendar Settings” and scroll down to the “Integrate calendar” section and copy the URL from the “Public address in iCal format” 

*BETA: We are calling this ICS sync featured released in version 1.5 a beta feature, since it is quite advanced and will need tested with more scenarios from customers than what our team can do. If you already own the plugin and need this ICS sync feature, we encourage you to try it out and let us know how it goes! But please be patient with us if there is any issue that needs more work. It should work fine, but we want to under promise and over deliver!

Date

Custom Date Format

This input field in the Date tab of the Date/Time Picker Settings allows you to enter a custom date format using your preferred PHP parameters. This will override and take priority over any other date format you have selected. To learn more about date formats, we recommend the blog post from Elegant Themes.

custom date format setting in the Divi Contact Form Helper plugin

Week Start Day

Some countries have a different standard day of the week that is considered the start day, so this setting allows you to choose the first day of the week in the date picker calendar.

week start day settings in the Divi Contact Form Helper plugin

Disable Week Days

This setting enables you to disable days of the week from the date picker. Visitors on the frontend will not be able to select dates if they are on the days of the week that are checked.

disable week days setting in the Divi Contact Form Helper plugin

Disable Past Dates

Most of the time, you would not want visitors to select a date in the past, so this new setting disables the selection of dates that are before the current date. It’s nice to have it optional, because some users may need this, depending on what the date is about.

disable past dates setting in the Divi Contact Form Helper plugin

Disable Current Date

The relative minimum dates below do not work for the current date, so we added a separate setting to handle that. Now you can prevent the current date from being selected.

disable current date setting in the Divi Contact Form Helper plugin

Fixed Or Relative Minimum Dates

If you want to limit which dates can be selected, you can choose either Fixed or Relative as the Minimum Date Type.

If you choose Fixed, then you can enter a fixed date to set a limit for the minimum date that can be selected. Set 0 for today.

fixed minimum date setting in the Divi Contact Form Helper plugin

If you choose Relative, then you can enter a negative or positive number relevant to the current date to set a limit for the minimum date that can be selected. For example -3 or +10. NOTE: You can choose up to 31 days for minimum and maximum relative dates.

relative minimum date setting in the Divi Contact Form Helper plugin

Fixed Or Relative Maximum Dates

If you want to limit which dates can be selected, you can choose either Fixed or Relative as the Maximum Date Type.

If you choose Fixed, then you can enter a fixed date to set a limit for the maximum date that can be selected. Set 0 for today.

fixed maximum date setting in the Divi Contact Form Helper plugin

If you choose Relative, then you can enter a negative or positive number relevant to the current date to set a limit for the maximum date that can be selected. For example -3 or +10. NOTE: You can choose up to 31 days for minimum and maximum relative dates.

relative maximum date setting in the Divi Contact Form Helper plugin

Available and Unavailable Dates

These settings allow you to set either specific dates that are available or unavailable to be selected. If you have a few dates that are available and the rest are not, then you would use the Available Dates setting. If most dates are available but only a few are not, then you would use the Unavailable Dates. You can enter as many dates as you want separated by commas. Keep in mind, the date format would be the same format as you have set for the field in other settings.

available and unavailable dates selection settings in the Divi Contact Form Helper plugin

Time

Custom Time Format

This input field in the Date tab of the Date/Time Picker Settings allows you to enter a custom time format using your preferred PHP parameters. This will override and take priority over any other time format you have selected. To learn more about time formats, we recommend the blog post from Elegant Themes.

custom time format setting in the Divi Contact Form Helper plugin

Minimum And Maximum Times

These settings allow you to enter the minimum and maximum times which can be selected. 

minimum and maximum time settings in the Divi Contact Form Helper plugin

Available and Unavailable Times

These settings allow you to set either specific times that are available or unavailable to be selected. If you have a few times that are available and the rest are not, then you would use the Available Times setting. If most times are available but only a few are not, then you would use the Unavailable Times setting. You can enter as many dates as you want separated by commas. Keep in mind, the time format would be the same format as you have set for the field in other settings. You can set the global times which apply to all days, or use the individual day of the week input fields to override the global times.

available and unavailable times per day of the week settings in the Divi Contact Form Helper plugin

Time Steps

Enter the number of minutes to set the interval between the available times that can be selected. If you want to allow dates every 30 minutes, you would enter 30, or 15 for 30 minutes or 60 for every hour.

time steps setting in the Divi Contact Form Helper plugin

Design Settings

As if all those functionality settings were not enough, we also provide hundreds of design settings to style and customize every aspect of the date and time picker. These new design settings fall into three categories and are listed below:

General Design Settings

The General tab is where you style the overall date/time picker container and includes all the standard options like background color, margin and padding, border settings, and box shadow settings.

general design settings for the date and time picker in the Divi Contact Form Helper plugin

Date Picker Design Settings

This Date tab has all the styling options related to the date picker. This includes a crazy amount of options, and there’s too many to list, so have a look and see that everything has settings for it! 

date design settings for the date and time picker in the Divi Contact Form Helper plugin

Time Picker Design Settings

This Time tab has all the styling options related to the time picker. Just like for the date picker, we include every setting imaginable, so check the screenshot and you will see you can customize everything!

time design settings for the date and time picker in the Divi Contact Form Helper plugin

Last updated Feb 20, 2023 @ 4:17 pm

0

Your Cart