Date and Time Picker for WordPress

Date Time Picker Field is a WordPress plugin that allows you to apply a simple Date and Time picker field to any input field using CSS Selectors.

After you install the plugin, go to the Settings page under Settings > DateTime Picker. There you’ll find the plugin options.

The most important thing to get started is to know the CSS selector of the input field that you want to apply the DateTime picker. There are numerous youtube tutorials that describe techniques to do this, if you don’t know how yet.

Perfect for appointments or booking forms that need to follow certain opening times and booking rules.

Features

Set minimum and maximum time
Set a time offset
Set minimum and maximum dates – also based on the current date
Disable past dates
Automatically display next available time slot
Display picker inline
Different date formats
Disable specific weekdays
Disable specific dates
Set list of allowed time slots for week day

WordPress Version 5.0
Tested up to 5.6.2
PHP Version 5.6.2
Available in English and Portuguese(Portugal)

PRO Version

There’s a PRO version of the plugin, where you can set different rules for different input fields and even enable a Date range, using 2 fields.

Credits

The original datetime picker jquery script that the plugin uses was developed by Valeriy Chupurnov under MIT License.

Moment JavaScript date library

Github

You can find the latest development version on the github page for the plugin.

FAQ

Why was this plugin developed?

This plugin was developed because of the need of having a date and time picker field on a contact form that did not include this type of field.
Using this plugin you can convert any text input field into a data time picker field. Including on contact forms.

How do I prevent the datetimepicker scripts and styles from loading across all my website?

In the settings page for the plugin you can find the option to load the necessary files only when the shortcode [datetimepicker] exists on the page.
If you have this option selected, the plugin will only look for fields to convert when this shortcode exists on that page.

How do I add specific times for different days? For example, for weekends?

In the settings page for the plugin you can find a ‘Advanced Settings’ tab were you’ll find some options to set available times for each day. You’ll need to individually set each time available as default, for example ’09:00,09:30,09:50,10:50,11:30′ and then override this default values for each day you need. It will not work well if you don’t setup a default list of allowed times. The list of times still needs to be inside the minimum and maximum times set in the ‘Basic Settings’ tab.