Date Time Picker for Contact Form 7 Pro adds date, time, or combined date-and-time pickers to Contact Form 7 text fields. A CSS class on each field determines which picker it uses.

Choose a picker for each field

In the Contact Form 7 CSS Classes editor, add walcf7-datepicker for dates, walcf7-timepicker for times, or walcf7-datetimepicker for both. Add the class to the text field. If you use multiple classes, separate them with spaces.

For example, a required booking date field can use [text* book-date class:walcf7-datepicker placeholder "Date Picker"].

Set date availability

Pro settings let you disable past dates and, when needed, today. You can also disable selected weekends, specific dates, and holidays, and set minimum and maximum allowed date selections. These rules can help guide booking, appointment, event registration, and service inquiry forms.

Configure time selection

Choose a 12-hour or 24-hour format, display or hide AM and PM, set the time step or interval, and specify minimum and maximum selectable times.

Choose a theme and language

Select a light or dark theme. The Pro version includes 51 language translations and is compatible with the WPML WordPress Multilingual Plugin.

Apply the options to your form

Install the Pro plugin, edit the relevant Contact Form 7 form, and add the picker class to each text field through the CSS Classes editor. Configure the date or time settings for those fields, then review the form to confirm the selections, format, theme, and language fit your scheduling needs.

An option lets you load the add-on script only on selected pages, so it can be limited to pages where the picker is used.