Date & Time Picker Documentation

The Date & Time Picker is a customizable booking system for Contact Form 7, allowing users to select dates and times with various restrictions and default options. It leverages the Flatpickr library for a modern and mobile-friendly interface.

Features

• Combined date and time picker.
• Separate date-only and time-only pickers.
• Business hours restrictions.
• Customizable time intervals (15, 30, or 60 minutes).
• Date range restrictions.
• Weekend disabling option.
• Default date and time values.
• 24-hour or 12-hour time format toggle.

Implementation

1. Basic Usage in Contact Form 7

Add the following fields to your Contact Form 7 form:

<!-- Combined Date and Time -->
<text* pickup-datetime class:datetime-picker placeholder "Select Date and Time">

<!-- Date Only -->
<text* pickup-date class:date-only placeholder "Select Date">

<!-- Time Only -->
<text* pickup-time class:time-only placeholder "Select Time">

2. WordPress Customizer Settings

Navigate to WordPress Admin → Appearance → Customize → Date & Time Picker Settings to configure options:

Basic Settings

• Enable/Disable Date & Time Picker.
• Time Interval (15, 30, or 60 minutes).
• Business Hours Start/End.
• Disable Past Dates.
• Disable Weekends.
• Time Format (24-hour or 12-hour).

Date Range Settings

• Minimum Date Offset (days from today).
• Maximum Date Offset (days from today).

Default Value Settings

• Default Date Offset (days from today).
• Default Time (24-hour format or 12-hour format based on settings).

Features Explanation

Business Hours

Restrict time selection to specified opening and closing hours. Example: 09:00 AM to 05:00 PM.

Time Intervals

Control available time slots. Choose between 15, 30, or 60-minute intervals. Example: 9:00, 9:30, 10:00, etc.

Time Format

Toggle between 24-hour (e.g., 14:30) and 12-hour (e.g., 2:30 PM) formats for user preferences.

Default Values

Set initial date and time values for form load. Example: Default to Today + 2 days at 10:00 AM.

Date Restrictions

Limit selections to a specific date range and exclude past dates or weekends.

Events and Integration

Listen to custom picker events for additional functionality:

document.addEventListener('dateTimeSelected', function(e) {
    console.log('Selected Value:', e.detail.value);
    console.log('Input Element:', e.detail.inputElement);
});

Mobile Responsiveness

• Native date/time pickers for supported mobile devices.
• Flatpickr fallback for other devices.
• Touch-friendly interface.

Troubleshooting

Common Issues:

1. Picker not appearing:
   • Verify datetime_settings.enabled is true.
   • Check for JavaScript console errors.
   • Ensure the correct classes are applied to form fields.
2. Incorrect default time:
   • Confirm timezone settings in WordPress.
   • Verify the selected time format (12-hour/24-hour).
   • Check default offset settings.
3. Misaligned time slots:
   • Validate time interval configuration.
   • Check business hours restrictions.
   • Ensure no conflicts exist with date range or weekend settings.

CSS Customization

Add custom styles to modify the appearance of the picker:

.flatpickr-calendar {
    /* Custom styles here */
}

Best Practices

• Default Values: Align default times with business hours and account for time zones.
• Time Intervals: Match interval settings with scheduling requirements.
• Date Restrictions: Use practical ranges to accommodate preparation times.