Create a Date Time Picker with block function
Create a Date Time Picker with block function
This guide will show you how to create a free, customizable date and time picker for your website using the Date Time Picker for Contact Form 7 plugin by Ruhul Amin, with code modifications made in DirectAdmin. By the end of this guide, you will be able to block certain dates and times to suit your needs.
Step 1: Install the Date Time Picker for Contact Form 7 plugin on your WordPress + Elementor website.
Step 2: Make code modifications in DirectAdmin. Find the original code in the plugin and make the following changes to block certain dates and times:
- Add minDate: new Date() to set the minimum date as the current date.
- Use onSelectDate function to set allowed times based on the selected date.
- Use beforeShowDay function to only show weekdays and not weekends.
- Use maxTime and beforeShowTime functions to set a maximum time and to only show certain times on specific days.
Step 3: Test your date and time picker to ensure that it works as desired.
By following these steps, you can create a free, customizable date and time picker for your website without spending any money.
This is how you create a Date Time Picker with block function.
$('.walcf7-datetimepicker').each(function(index, element) {
var tomorrow = get_tomorrow();
$(this).datetimepicker({
**minDate: new Date(),**
onSelectDate: function(ct) {
var selected_date = ct.getDay();
var allowed_times;
if (selected_date == 1) {
allowed_times = ['18:00', '19:00', '20:00'];
} else if (selected_date == 2 || selected_date == 3 || selected_date == 4 ) {
allowed_times = ['18:30', '19:00', '20:00', '21:00'];
} else if (selected_date == 5) {
allowed_times = ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'];
} else if (selected_date == 6) {
allowed_times = ['10:00', '11:00', '12:00', '13:00'];
} else {
allowed_times = [];
}
$('.walcf7-datetimepicker').datetimepicker({
**allowTimes: allowed_times**
});
},
**beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 0), ''];
},
timepicker: true,
maxTime: '21:00',
step: 60,
beforeShowTime: function(date){
if (date.getDay() == 3) {
if (date.getHours() < 18 || date.getHours() > 20) {
return false;
}
}
return true;
},**
dayOfWeekStart : 1,
yearStart: '1900',
lang:'en',
format:'Y-m-d H:i',
formatDate:'Y-m-d',
formatTime:'H:i',
defaultTime:'10:00',
validateOnBlur: false,
startDate:tomorrow,
});
});
The changes made are highlighted in bold. The minDate option was added to set the minimum selectable date as the current date. The onSelectDate function was added to specify the allowed times for each selected day, which are set with the allowTimes option. The beforeShowDay function was added to restrict selection of Sundays (day 0). The timepicker option was set to true to enable time selection, the maxTime option was set to '21:00' to set the maximum selectable time, and the step option was set to 60 to specify the time interval in minutes. The beforeShowTime function was added to restrict time selection on Wednesdays (day 3) outside of the specified hours.
This is how to create a Date Time Picker with block function.
This is how to create a Date Time Picker with block function.