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!
NOTE: The original tutorial shared here used a free plugin which is no longer supported. But we have a new solution! We have released a new plugin called Divi Contact Form Helper with date and time picker settings!
Set Appointments or Calls with The Divi Contact Form!
I may be a minority, but I love the Divi Contact Form module. But I often wondered how to add a date picker to the Divi Contact form. I wanted this so that I could allow our website visitors to schedule a call. I’m pleased to show you how we did this with a very simple solution.
FYI: You can do this with a setting directly in the Divi Contact Form module with our popular Divi Contact Form Helper plugin! Take a look, it is so easy!
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
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.
I hope you have enjoyed learning How To Add A Date and Time Picker To The Divi Contact Form. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)
Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
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.
Hi Vicki,
Yes, I believe you can do that easily with this same method. Just uncheck the option for “show times” in the plugin settings. You will probably need to create two separate fields in your form, one for arrival and one for departure.
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?
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) ?
Hey Tom,
It could be a number of factors, such as the enqueuing method, cache, and loading hierarchy. I’ve had issues with this for some things such as WooCommerce styles, for example, they work perfectly in the Divi Theme Options because they have a higher priority, but in my child theme stylesheet, they don’t work.
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
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.
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
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.
It’s great up to this point, so adding mobile support would make it perfect. Looking forward to hearing back from you!
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 important tags on hover colors. Thanks for finding this solution and getting me started. I found it just in time for a project I’m working on.
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)?
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?
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?
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 “Choose Date and Time” field. The calendar will popup. What could be the conflict here?
Hi Charles,
I’m not really sure what you mean by the popup since that’s not part of Divi. It’s probably something to do with either having two on the same page or something with that popup plugin code.
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!!
I am having the same issue. Can you please share your solution?
Abigail Valdés
on September 25, 2020 at 5:14 pm
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?
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.
Sorry I’m not sure, maybe check with the plugin author.
Thaabit Van schoor
on November 3, 2020 at 8:44 am
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
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?
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…
This works amazing if the form is fixed. i have a contact form as a popup and therefore the calendar option is opening behind the pop-up. How can i fix this.
I am assuming that you are talking about the orange color that is coming on hover. That orange color by default comes on hover and there is no code for that in the given snippet. If you want to change the orange color on hover then you can use these CSS snippets:
/*This is for the hover color on dates*/
.xdsoft_datetimepicker .xdsoft_calendar td:hover{
background-color: red !important;
}
/*This is for the hover color on Time*/
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover{
background-color: red !important;
}
You can place your preferred color at the place of red. Please let us know if that helps. 🙂
can you write maybe the code for the dark style? Becouse your code work only on default theme. Thx for the great tutorial
Arthur
on July 17, 2021 at 12:55 pm
Hi Nelson, I believe this plugin has been updated. I tried to follow the same steps shown here but was unable to make it work. Do you have any tips on the new version of this plugin?
Click on the integration menu and you just have to delete the point “.” that appears at the beginning of the default text, in the Css Selector field. Copy the resulting text and paste it into the field ID of the form. In my case the default code was .input597 and I deleted the initial point and it was: input597. It worked very well. I apologize for my English.
There’s been an update on the plugin. No need to input the “input[data-original_id=\’pa-date-time-picker\’]”, just put “pa-date-time-picker” (no quotes) and it will work again.
In this tutorial I will show you how to move the Divi Gallery module title and caption text over the image and add a nice hover effect.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
Hey, that’s a great one!
Thanks Samar!
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
Hi Vicki,
Yes, I believe you can do that easily with this same method. Just uncheck the option for “show times” in the plugin settings. You will probably need to create two separate fields in your form, one for arrival and one for departure.
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.
Hello Hans,
I’m not sure how to make them separate fields or how to change the placeholder text. Sorry about that!
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.
Thanks Elba, I totally missed that!
This filed does not have a placeholder option… How can we fix this? Pretty useless if we cannot change the placeholder…
Hi Williem,
Just enable the hidden labels instead like in this other tutorial: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-move-labels-above-input-fields-in-the-divi-contact-form/
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
Hey Tom,
It could be a number of factors, such as the enqueuing method, cache, and loading hierarchy. I’ve had issues with this for some things such as WooCommerce styles, for example, they work perfectly in the Divi Theme Options because they have a higher priority, but in my child theme stylesheet, they don’t work.
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
Hi Tom,
I’m not really sure what you mean as mine is working fine. Perhaps with a link I can take a look.
add the z-index CSS rule, and set it very high.
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.
Hi Gerard,
If I understand correctly, you mean the placeholder text changes. In that case, try using labels with this tutorial as well: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-move-labels-above-input-fields-in-the-divi-contact-form/
Nelson, Thanks for your response.
The plugin and the CSS did the trick.
I’m satisfied.
Thanks again.
That’s wonderful, Gerard! So glad we could help!
Very useful and interesting.
Your items are always of superior quality.
Congratulations, it was useful for a customer.:-)
Thank u buddy!
Thank you Gio, your kind words and feedback are greatly appreciated!
Thank you for the detailed tutorial. It really helped!
Hi Christina, I’m so glad you like it! You are most welcome!
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
Hi Gio,
I have looked for that before but don’t know how, sorry.
I have seen that on Smartphone the data module exits the screen. Did you notice it?
Tnx
Okay, might need to adjust the widths.
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.
It’s great up to this point, so adding mobile support would make it perfect. Looking forward to hearing back from you!
Hi Mark,
Just change anything that says “width” in the CSS to your liking.
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 important tags on hover colors. Thanks for finding this solution and getting me started. I found it just in time for a project I’m working on.
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!
Hi Vic, I’m not sure, if it’s possible I don’t know how.
did you found out if its possible?? i have the same question 🙁
Hello, date time Picker plugin is a greet one.
Please what I have to do to make clendor, time mobile responsible?
thanks
Hi Bassam,
You can change any of the numbers that say width: to whatever you want. You can do this just on mobile with media queries. You can learn more about them here: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-add-custom-css-media-queries-to-divi-for-making-your-site-responsive/
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
I’m not sure why you did that. Just do what I said in the previous comment and you will be fine.
thank you for your recommendation. It works
Wonderful!
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.
Hi Audrey,
I really don’t know, it’s not my plugin I am just showing how I did it.
i have the exact same question 🙁 did you find an answer?
hey man you can do it like that,
input[data-original_id=’date_of_birth’],[data-original_id=’date_of_birth_2′],[data-original_id=’date_of_birth_2’_2]
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
Hi Jake, not really sure. Do they mention that in their support anywhere? Try again, could be hosting too.
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
Hey there, I’m really not sure, I’m not an expert on this plugin, just Divi. 🙂
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.
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 “Choose Date and Time” field. The calendar will popup. What could be the conflict here?
Hi Charles,
I’m not really sure what you mean by the popup since that’s not part of Divi. It’s probably something to do with either having two on the same page or something with that popup plugin code.
Hi Nelson, I have use this plugin a couple of times and it really solve the problem.
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!!
Sure, if you send me the link I will look at it.
Sure: https://bakedbymi.co.uk/contact/
Thanks a lot!!
I am having the same issue. Can you please share your solution?
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?
Hi Abigail,
I don’t know, I’m not familiar with any pro version as this is not my plugin. Just shared the tip since I came across it.
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
Hi Phil,
I’m really not sure as I’m not very familiar with it beyond the part of integrating with Divi, which I am familiar with 🙂
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 😀
Sorry I’m not sure, maybe check with the plugin author.
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
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’]
Hi Gerard,
I’m not sure, sorry this is just a tutorial did showing what is possible but I’m not the plugin creator.
You Rock ! Awesome, thanks for your great job
Thanks Chris!
Hi thanks for the tutorial, can i use 2 date picker in the same page ?
I don’t see why not, have one in two different forms.
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…
Thank you! I’m not sure, sorry. Check the plugin and see if they have anything or maybe the author could add it.
Hey, it’s really good stuff. I find booking slot system for saloon
and suddenly I find this guy !!!!
I’m glad you found our tutorials! Be sure to check the hundreds of other posts as well! 🙂
thank you so much!
You are welcome, Hallie!
hello, where can he change the time format
Hi Emrah, their plugin has time format in the settings.
I am trying to get the calendar selector to my Divi contact form but it seems to not work? Can you help?
I’m not sure, the instructions here are correct so anything else beyond that I really don’t know.
This works amazing if the form is fixed. i have a contact form as a popup and therefore the calendar option is opening behind the pop-up. How can i fix this.
Please share the URL of the page where the issue is happening so that I could investigate further. 🙂
You’re welcome!
Hi, Where do you change the orange colour in your code?
I am assuming that you are talking about the orange color that is coming on hover. That orange color by default comes on hover and there is no code for that in the given snippet. If you want to change the orange color on hover then you can use these CSS snippets:
/*This is for the hover color on dates*/
.xdsoft_datetimepicker .xdsoft_calendar td:hover{
background-color: red !important;
}
/*This is for the hover color on Time*/
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover{
background-color: red !important;
}
You can place your preferred color at the place of red. Please let us know if that helps. 🙂
can you write maybe the code for the dark style? Becouse your code work only on default theme. Thx for the great tutorial
Hi Nelson, I believe this plugin has been updated. I tried to follow the same steps shown here but was unable to make it work. Do you have any tips on the new version of this plugin?
Even on their website (https://www.inputwp.com/documentation/basic/how-to-integrate-the-date-and-time-picker-with-divi/) they have some instruction on how to use it in Divi, but the options they say to select, do not exist within the plugin.
Any help will be greatly appreciated!
I have the same problem! Doesn’t work to my website either
Click on the integration menu and you just have to delete the point “.” that appears at the beginning of the default text, in the Css Selector field. Copy the resulting text and paste it into the field ID of the form. In my case the default code was .input597 and I deleted the initial point and it was: input597. It worked very well. I apologize for my English.
I am interested to an update of the tutorial too! 🙂
After plugin update, in the Input WP -> Integrations -> CSS Selector if you paste
input[data-original_id=’date-pickup’], input[data-original_id=’date-dropoff’]
the plugin add slashes into the name and show like this
input[data-original_id=\’date-pickup\’], input[data-original_id=\’date-dropoff\’]
Then date time picker not show.
Hi there guys, is there solution on this now? or it’s still not working?
Yes this tutorial is not working
input[data-original_id=\’pa-date-time-picker\’]
new update the pluign. Every time when I client in the update in the CSS selector \\ is appears. How to fix that issue.
We have this to..
There’s been an update on the plugin. No need to input the “input[data-original_id=\’pa-date-time-picker\’]”, just put “pa-date-time-picker” (no quotes) and it will work again.
It still doesn’t work.
Tried this way: https://github.com/Aitor1111/fix-divi-datetimepicker
Nothing showed up.
Pretty bad for a paid plugin.
There are a lot of bad reviews recently for this plugin, you may want to update the article.
Yes…I did already. Check the top of the post 🙂
That good option, but how about adding Time and Date to header?
Please have a look to the link
http://shoon-bthemez.blogspot.com
Could you please guide me?
Thank you