Inserting date fields in Divi

In this article, I’ll show you how to create a date picker in Divi Divi is a WordPress theme and has great features. With this theme you hardly need any additional plugins in WordPress! Official website of Divi Forms for making appointments or callbacks.

1. adding a new date field

Click on the settings in a Divi Divi is a WordPress theme and has great features. With this theme you hardly need any additional plugins in WordPress! Official website of Divi contact form of your choice to edit the form. Click on the plus symbol “Add new field”. The field settings open with an input field for the field ID and the title. You can write something like “Desired date/time for callback” in the title field. The important part is the field ID. Insert the following CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here . class there and save the form.

pa-date-time-picker

2. adding a plugin

Now that you have set the field ID in the Divi Divi is a WordPress theme and has great features. With this theme you hardly need any additional plugins in WordPress! Official website of Divi contact form, let’s go to the WordPress WordPress does more than 38.8% of all websites on the internet. Yes - more than one in four websites you visit is likely powered by WordPress. • WordPress.org , often as self-hosted WordPress is the free open source WordPress software that you can install on your own web host to create a 100% custom website.• WordPress.com is a for-profit, paid... dashboard and add a new plugin. Go to Plugins> Install and search for, install and activate the plugin called Date Time Picker Field.

3. customize the settings of the plugin

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

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

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

When you are finished, it will look like the following picture. Make sure you save it.

4. make optional adjustments to the design

We use the method described in this tutorial for our callback contact form. We’ve changed the styles of the plugin a lot and included the code below so you can use it if you want. You can adjust the colors etc. according to your wishes and add this to the CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here . field Divi>Theme Options.

.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 shows how our contact form selects the date and time.

Dieser Beitrag ist auch verfügbar auf: Deutsch (German)