Code by Day | Explore By Weekend

How To Add A Date and Time Picker to the Divi Contact Form Tutorial by Pee-Aye Creative

How To Add A Date and Time Picker To The Divi Contact Form

Here's a super easy and very practical way to add a date and time picker to the Divi Contact form module. This is a great way to allow appointment bookings!

1. Add A New Field

In a Divi contact form of your choice, click to edit the settings. Click on the “Add New Field” plus icon. The Field Settings will open with an input field for Field ID as well as Title. You can write something like “Choose a Date and Time” in the title field, that isn’t important. The most important part is the Field ID. Add the following CSS class there and save the form.

pa-date-time-picker

2. Add A Simple Plugin

Now that you have set the Field ID in the Divi Contact form, let’s go to the WordPress Dashboard and add a new little plugin. Go to Plugins>Add New and search for, install, and activate the plugin called Date Time Picker Field.

3. Adjust The Settings

Next, we need to add a simple line of code to the plugin settings.

Go to Settings>Date & Time Picker and paste in the following line:

input[data-original_id='pa-date-time-picker']

It will look like this image below when you are finished. Be sure to save that.

Those are the most important parts for the tutorial that I need to show you. The rest of the settings need to be configured to your preferences. I suggest looking down through the basic and advanced settings to make sure the days, times, etc. are set how you want them.

4. Optional Design Improvement

We are using the method described in this tutorial on our call scheduling contact form. We hacked up the plugin styles a lot, and have pasted that code below for you to use if you want. You can customize the colors, etc. to your liking and past this in the Divi>Theme Options CSS box.

.xdsoft_datetimepicker {
   box-shadow: 0 15px 40px 6px rgba(0, 0, 0, 0.1)!important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {
   background: #2cba6c;
   box-shadow: #2cba6c 0 1px 3px 0 inset;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default:hover {
   background: #e03574!important;
   box-shadow: #e03574 0 1px 3px 0 inset!important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
   color: #e03574!important;
}

.xdsoft_datetimepicker .xdsoft_datepicker {
   width: 350px!important;
}

.xdsoft_datetimepicker .xdsoft_timepicker {
   width: 100px!important;
}

.xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar th {
   background: #ffffff;
   border: 2px solid #ebf8f1;
}

.xdsoft_datetimepicker.xdsoft_noselect.xdsoft_default {
   padding: 20px;
   border-radius: 10px;
   border: none;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div {
   background: #ffffff;
   border-top: 2px solid #ebf8f1;
   color: #333;
   font-size: 16px;
   text-align: center;
   border-collapse: collapse;
   cursor: pointer;
   border-bottom-width: 0;
   height: 36px;
   line-height: 36px;
   padding: 0 8px;
}

.xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar th {
   background: #ffffff;
   border: 2px solid #ebf8f1;
   color: #333;
   font-size: 16px;
   height: 36px;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
   border-bottom: 2px solid #ebf8f1;
}

.xdsoft_time_box {
   border: 2px solid #ebf8f1;
}

The image below is how our contact form date and time picker looks.

70
Last updated Jan 3, 2021 @ 1:13 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
73 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Samar
1 year ago

Hey, that’s a great one!

Vicki Robinson
1 year ago

This is really a great tutorial! I’m trying to find something that will allow you to pick an arrival date and departure date (no times). Any suggestions?
I’m not a coder and finding it difficult to find an easy solution.

~ Vicki

Hans
Hans
1 year ago

I like the way you show how to use the date-time picker.
There two things I would like to know, is there a way to make a separate fields, one for the date and the other for time? And is it possible to change the placeholder text to something custom in stead of the current date/time?

Thanks for the fine tutorial.

Elba
Reply to  Hans
1 year ago

Yes Hans, on the plugin’s basic settings you can mark “keep placeholder” and it will display the text that you put on the form.

Willem Prinsloo
Willem Prinsloo
1 year ago

This filed does not have a placeholder option… How can we fix this? Pretty useless if we cannot change the placeholder…

Tom
Tom
1 year ago

Hi and thanks for the tips!

Everything is working well for me.

However I am wondering if you have any idea why it doesn’t work when I put the additional CSS in my child theme CSS sheet (instead of the parent one) ?

Thanks

Thomas

Tom O'Neill
1 year ago

Hey – this is awesome thanks – I can see the date/time picker populating but it’s behind some other layers/overlayers – any ideas on how I can ‘bring it to front’ essentially?
Thanks,
Tom

Lucas Lopvet
Lucas Lopvet
Reply to  Tom O'Neill
1 year ago

add the z-index CSS rule, and set it very high.

Gerard
11 months ago

Hi,
Great tutorial.
I was looking for the option of adding a date Picker inside the Divi Contactform.
Date for arrival and departure.
In this case, your original (Divi) text will be override by the date.
So a client can’t see were to fill in date for arrival or departure.

Gerard

Nelson, Thanks for your response.
The plugin and the CSS did the trick.
I’m satisfied.
Thanks again.

gio
gio
10 months ago

Very useful and interesting.
Your items are always of superior quality.
Congratulations, it was useful for a customer.:-)
Thank u buddy!

Christina
10 months ago

Thank you for the detailed tutorial. It really helped!

Gio
Gio
8 months ago

Hi. Thanks for this tutorial, really crazy. I ask you one thing: do you think you could use a field id where to show only the date and another where to show only the time? Thanks so much

Gio
Gio
8 months ago

I have seen that on Smartphone the data module exits the screen. Did you notice it?
Tnx

Mark
Mark
8 months ago

Hi there! Thanks for this tutorial. I would love to implement it, HOWEVER it is not mobile-friendly. When you are on a cell phone, the date picker calendar hangs off the side of the phone screen and you can’t get to the rest of the dates. I went to your actual website to try it on my iPhone and it’s off the side of the screen. Do you have any code you could update this tutorial with in order to make this mobile friendly? If it doesn’t work well on cell phones, it’s not really a complete solution for me.… Read more »

Mark
Mark

Thanks. I went in and implemented this on a test website this morning. If you don’t add any width information, the picker fits on a phone just fine. I decided to go in and give it a defined width of 325px so that it’s guaranteed to fit down to an iPhone 5. Also, I discovered that you can pretty much get away without using !important tags if you just put “body .xdsoft_datetimepicker” at the beginning of each CSS selector. The only times I had to use important was when adjusting hover colors. For some reason, the dev used their own… Read more »

Vic
Vic
7 months ago

This is a great plugin! I was wondering if how could it work if the form has 2 fields that require date and time like “Start date (field 1) and End date (field 2)?

Thank you!

Abigail Valdés
Abigail Valdés
Reply to  Vic
3 months ago

did you found out if its possible?? i have the same question 🙁

Bassam Disi
7 months ago

Hello, date time Picker plugin is a greet one.
Please what I have to do to make clendor, time mobile responsible?
thanks

Bassam Disi

Thank you very much for your reply.

I have treid with this syntax:

.et_xdsoft_datetimepicker .et_xdsoft_timepicker .et_xdsoft_time_box {

 display: flex;

 justify-content: center;}

but no changes, the same problem, can you pls help me.

I attached shott screen, thats shows the situation on mobile

100105872_562842094420190_5351962522821853184_n.png
Bassam Disi

thank you for your recommendation. It works

Audrey
Audrey
6 months ago

Hi! I’m wondering how I would use this plugin for 2 fields in the same form. I’m not sure how to use the selector for 2 differences ids.

Abigail Valdés
Abigail Valdés
Reply to  Audrey
3 months ago

i have the exact same question 🙁 did you find an answer?

JAke
JAke
5 months ago

Hi there
When I activate the plugin, I get this error message on the error log:

PHP Fatal error: Maximum execution time of 30 seconds exceeded in /var/www/htdocs/wp-content/plugins/date-time-picker-field/includes/DateTimePicker.php on line 431

The site will not load when the plugin is activated. Do you know why?

Thanks

luca.zaninello
luca.zaninello
5 months ago

Hi Nelson,
this is what I needed, thank you.
I’m asking a little more bit.

I’ve one field for Arrival date and another one for Departure: if I select a certain date as Arrival (let’s say July 25) is it possible that the calendar in the Departure field starts from July 26?

Thanks for any suggestion,
Luca

Abigail Valdés
Abigail Valdés
Reply to  luca.zaninello
3 months ago

Hi, how did you make it possible to add two fields with the calendar option? but its doesnt let me because the id changes 🙁 so it doesnt work.

Charles McClinon
Charles McClinon
5 months ago

I have added the date and time picker to the contact form. Everything works great until I use it as a popup. When a user clicks on the calendar, it will not display. However, when it functions solely as a section, the module works just fine. https://yaecobrand.com/ To demonstrate the difference click on the button that reads “schedule now” in the first section below the primary menu. A section will pop up. Place your cursor in the “Choose Date and Time” field. No calendar. Scroll down the page and find a duplicate of the section. Place your cursor in the… Read more »

Luis Maia
5 months ago

Hi Nelson, I have use this plugin a couple of times and it really solve the problem.

TMM
TMM
4 months ago

Hi! Great tutorial! Thank you so much 🙂
I have a question about Design Improvement. I’m using your CSS code to customize it, but i can’t change the orange color of the hover (I can’t find the color code). Can you help me? Thanks in advance!!

TMM
TMM

Sure: https://bakedbymi.co.uk/contact/

Thanks a lot!!

Robynn
Robynn
Reply to  TMM
3 months ago

I am having the same issue. Can you please share your solution?

Abigail Valdés
Abigail Valdés
3 months ago

Hello, is there any way to add two fields with the calendar option? I cant add more than one because the id changes 🙁 or is this just an option for the “pro” version?

Philippe
Philippe
2 months ago

Hi! Thanks for the great article.

I was wondering if it would be possible to generate different shortcode each associated with different allowed time. This way we could use it as a booking tool for something with different location/availability.

Thanks again,
Phil

Philippe
Philippe

That’s allright 🙂

I followed your tutorial to the letter but it doesn’t seem to work for me.

I’m using:
input[date-original_id=’date-time-picker-drummond’]

in the CSS Selector and date-time-picker-drummond for the field ID but the date piker does not show on my page.

Do you have any idea as to why it does not work?

Thanks 😀

Last edited 2 months ago by Philippe
Thaabit Van schoor
Thaabit Van schoor
2 months ago

im having an issue with the pop up, on desktop its perfect is there anyway to always auto align it to the middle of your screen on mobile and also its not possible to scroll on the popup

Gerard Drent
1 month ago

Hi Nelson,
I’m making a request form including 20 date questions.
To use date time picker I made 20 fields with different names.
But, they don’t work.
Do I make some mistakes?

input[data-original_id=‘gebdatum-aanvrager’],input[data-original_id=‘gebdatum-partner’],input[data-original_id=‘gebdatumvolw1’]

chris
chris
1 month ago

You Rock ! Awesome, thanks for your great job

andres
andres
25 days ago

Hi thanks for the tutorial, can i use 2 date picker in the same page ?

theCreativeMind
theCreativeMind
15 days ago

happy new year! another great tutorial … is there a way to sync 2-way the date picker to a google calender … e.g. the already occupied days would be blocked already or such…

Yash patel
Yash patel
12 days ago

Hey, it’s really good stuff. I find booking slot system for saloon
and suddenly I find this guy !!!!

Last edited 12 days ago by Yash patel
Hallie Halpern
Hallie Halpern
10 days ago

thank you so much!

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart