Using Date Time Picker Field, you can easily add a date and time picker to your Contact Form 7 forms.
Date Time Picker Field provides many features including:
- time picker as well as date picker
- display only the date picker or only the time picker
- 15 selectable date formats and 2 selectable time formats
- customizable time steps, offset for the available times
- customizable values for minimum and maximum dates and times.
You simply need to add a selector under Settings >> Date & Time Picker.
Then, use the same selector in any date field of your Contact Form 7 forms where you want to display the date picker.
Using CF7 Tag Generator
To add the selector, go to your form and select the date form tagForm Tag Form Tags in Contact Form 7 (CF7) (in the Form Tab) are used to define all CF7 form fields. Each Form Tag is replaced with an HTML element, which represents an input field, when it is displayed in an actual form..
The selector is added in the Class Attribute of the form, since the DatePicker is added using a CSS class called .datepicker-form-field.
Using CF7 Skins Visual Editor
It’s even easier to add the Date Time Picker selector in any date field of a Contact Form 7 form using the CF7 Skins Visual Editor.

Adding Datepicker via CF7 Skins Visual Editor
The Date Time Picker Pro version lets you customize the settings for each datepicker field individually.
Tip: With the CF7 Skins Visual Editor you don’t need to work directly with CF7 Tags. Our drag & drop Visual Editor includes support for all Contact Form 7 tags & options.
Tip: The wide range of free Contact Form 7 Extensions available can give users many of the functions available in some of the well-known premium form plugins.