How to Set Up Date and Time Options Specific to Day of the Week

Overview

Would you like to set up date and time options on your form that change based on the day of the week? You may have different hours for your online store on Saturday or Sunday then you do on Monday through Friday. With some PHP snippets, you can easily have the Time field display different options in the dropdown based on the day of the week and we’ll show you how to achieve this.

Setup

There is a lot of set up that goes into creating this type of form. Each Date field and Time field needs to be separate. And each needs to have Conditional Logic enabled based on the day of the week that is selected.

In our example, our visitors will first select the day of the week they want to schedule their appointment. Based on the code we’ll be adding below, once they select their “day”, the calendar will only show those available dates. As with the dates, they’ll only see certain times based on that day of the week.

1) Setting up the form

First, create a dropdown that lists the days of the week you will be open. In our example, the dropdown will have Sunday through Saturday available.

Start by creating a dropdown for every day of the week you want to show available

2) Adding the Date and Time fields to the form

Next, we’re going to add a Date and a Time field for each day of the week.

To do this, select the Date/Time form field from the Add Fields inside the form builder.

Add a Date/Time field to the form

Inside the Advanced Options for the Date/Time field, select Date (only) from the dropdown of the Format.

Select Date for the format for the Date/Time field

Next, repeat this step again but in the Advanced Options for the Date/Time field, select Time (only) from the dropdown of the Format.

Select Time for the format for the Date/Time field

When naming each of these fields, be sure to name them specifically to that day of the week as this will make it easier in the next step when setting up Conditional Logic. Example: When adding a Date and Time field for Sunday, the label for that Date field would be Sunday Dates Available. The same can be used when adding a label for the Time field such as Sunday Times Available.

3) Adding the Conditional Logic based on the day selected

Now we’ll need to hide all the Date and Time fields unless that specific day is selected from the dropdown and we’ll do this by using Conditional Logic.

To enable Conditional Logic for each Date and Time field, click the checkbox to Enable conditional logic found inside the Advanced Options for each Date and Time field.

Set up the conditional logic to only show the date and time field for that day when that day is selected from the dropdown.

This will need to be done for each form field. For example, you’ll set up the Conditional Logic for the Sunday Dates Available and Sunday Times Available to only show when Sunday is selected from the dropdown.

4) Adding the code snippets

Now it’s time to pull it all together by adding this code snippet to your site.

/**
 * Conditional dates and times based on the day of the week.
 *
 * @link https://wpforms.com/developers/how-to-set-up-date-and-time-options-specific-to-day-of-the-week/
 *
 */

function wpf_dev_cond_date() {
?>
<script type="text/javascript">
    window.wpforms_906_4 = window.wpforms_906_4 || {};
    window.wpforms_906_4.datepicker = {
        disableMobile: true,
        // Don't allow users to pick past dates
        minDate: new Date(),

        // Disable all days except SUNDAY

        "disable": [
            function(date) {
                // return true to disable
                return (date.getDay() === 1 || date.getDay() === 2 || date.getDay() === 3 || date.getDay() === 4 || date.getDay() === 5 || date.getDay() === 6);

            }
        ]
    };

    window.wpforms_906_6 = window.wpforms_906_6 || {};
    window.wpforms_906_6.datepicker = {
        disableMobile: true,
        // Don't allow users to pick past dates
        minDate: new Date(),

        // Disable all days except MONDAY

        "disable": [
            function(date) {
                // return true to disable
                return (date.getDay() === 0 || date.getDay() === 2 || date.getDay() === 3 || date.getDay() === 4 || date.getDay() === 5 || date.getDay() === 6);

            }
        ]
    };
    
    window.wpforms_906_8 = window.wpforms_906_8 || {};
    window.wpforms_906_8.datepicker = {
        disableMobile: true,
        // Don't allow users to pick past dates
        minDate: new Date(),

        // Disable all days except TUESDAY

        "disable": [
            function(date) {
                // return true to disable
                return (date.getDay() === 0 || date.getDay() === 1 || date.getDay() === 3 || date.getDay() === 4 || date.getDay() === 5 || date.getDay() === 6);

            }
        ]
    };
    
    window.wpforms_906_12 = window.wpforms_906_12 || {};
    window.wpforms_906_12.datepicker = {
        disableMobile: true,
        // Don't allow users to pick past dates
        minDate: new Date(),

        // Disable all days except WEDNESDAY

        "disable": [
            function(date) {
                // return true to disable
                return (date.getDay() === 0 || date.getDay() === 2 || date.getDay() === 1 || date.getDay() === 4 || date.getDay() === 5 || date.getDay() === 6);

            }
        ]
    };
    
    window.wpforms_906_14 = window.wpforms_906_14 || {};
    window.wpforms_906_14.datepicker = {
        disableMobile: true,
        // Don't allow users to pick past dates
        minDate: new Date(),

        // Disable all days except THURSDAY

        "disable": [
            function(date) {
                // return true to disable
                return (date.getDay() === 0 || date.getDay() === 2 || date.getDay() === 3 || date.getDay() === 1 || date.getDay() === 5 || date.getDay() === 6);

            }
        ]
    };
    
    window.wpforms_906_15 = window.wpforms_906_15 || {};
    window.wpforms_906_15.datepicker = {
        disableMobile: true,
        // Don't allow users to pick past dates
        minDate: new Date(),

        // Disable all days except FRIDAY

        "disable": [
            function(date) {
                // return true to disable
                return (date.getDay() === 0 || date.getDay() === 2 || date.getDay() === 3 || date.getDay() === 4 || date.getDay() === 1 || date.getDay() === 6);

            }
        ]
    };
    
    window.wpforms_906_17 = window.wpforms_906_17 || {};
    window.wpforms_906_17.datepicker = {
        disableMobile: true,
        // Don't allow users to pick past dates
        minDate: new Date(),

        // Disable all days except SATURDAY

        "disable": [
            function(date) {
                // return true to disable
                return (date.getDay() === 0 || date.getDay() === 2 || date.getDay() === 3 || date.getDay() === 4 || date.getDay() === 5 || date.getDay() === 1);

            }
        ]
    };    
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_cond_date' );

function wpf_dev_cond_time() {
?>
<script type="text/javascript">
    window.wpforms_906_5 = window.wpforms_906_5 || {};
    window.wpforms_906_5.timepicker = {
        forceRoundTime: true,

        // Limit times available on SUNDAY

        minTime: '12:00pm',
        maxTime: '2:00pm'
    };

    window.wpforms_906_7 = window.wpforms_906_7 || {};
    window.wpforms_906_7.timepicker = {
        forceRoundTime: true,

        // Limit times available on MONDAY

        minTime: '8:00am',
        maxTime: '5:00pm'
    };
    
    window.wpforms_906_10 = window.wpforms_906_10 || {};
    window.wpforms_906_10.timepicker = {
        forceRoundTime: true,

        // Limit times available on TUESDAY

        minTime: '8:00am',
        maxTime: '5:00pm'
    };
    window.wpforms_906_9 = window.wpforms_906_9 || {};
    window.wpforms_906_9.timepicker = {
        forceRoundTime: true,

        // Limit times available on WEDNESDAY

        minTime: '8:00am',
        maxTime: '5:00pm'
    };

    window.wpforms_906_11 = window.wpforms_906_11 || {};
    window.wpforms_906_11.timepicker = {
        forceRoundTime: true,

        // Limit times available on THURSDAY

        minTime: '8:00am',
        maxTime: '5:00pm'
    };
    
    window.wpforms_906_16 = window.wpforms_906_16 || {};
    window.wpforms_906_16.timepicker = {
        forceRoundTime: true,

        // Limit times available on FRIDAY

        minTime: '8:00am',
        maxTime: '12:00pm'
    };

    window.wpforms_906_18 = window.wpforms_906_18 || {};
    window.wpforms_906_18.timepicker = {
        forceRoundTime: true,

        // Limit times available on SATURDAY

        minTime: '10:00am',
        maxTime: '4:00pm'
    };
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_cond_time' );

The code above wrapped in the wpf_dev_cond_date function applies only to the fields on the form that are for the Date fields only.

The code wrapped in the wpf_dev_cond_time function applies only to the fields on the form that are for the Time fields only.

The _906 in all the above snippets will represent the form ID number so be sure to change this to match your own form ID. The second part of that code represents the field ID number. So the final number in those snippets, _18 for example, is the field ID number. You’ll need to update each of those to match your own field ID number as well.

If you need help locating your form and field IDs, please review this documentation.

And that’s it! Your form will now only show the dates and times will now dynamically change based on the day of the week they select from the dropdown. Would you like to also create additional time intervals for your Time field? Take a look at our article on How to Create Additional Intervals for the Date Time Field Time Picker.

Action Reference: wpforms_wp_footer_end