CODEWITHSUNDEEP
jquerywordpresscontact-form-7
wolffmart
wolffmart

Reputation: 81

Wordpress Contact Form 7 Show Disable Days of the Week

I am trying to get a datepicker in CF7 version 5.3.2 that will disallow weekend days from being selected.

I have added this Javascript to my footer.

jQuery(function ($) {
    $("#appt-date").datepicker({
    beforeShowDay: function(date) {
        var day = date.getDay();
        return [(day != 0 && day != 6)];
    }
    });
        
});

When I add this, a 2nd calendar appears under my calendar, with weekend days properly disabled, as pictured below. But, I need the main calendar to disable weekend days. Where is this 2nd calendar coming from how do I properly disable weekends on my main calendar?

enter image description here

Upvotes: 0

Views: 4812

Answers (3)

user10033295
user10033295

Reputation: 1

I used Date Time Picker for Contact Form 7 (Pro) to do this. For $15.00 you can use it forever. The Pro version has a Settings panel that allows you to pick the days you want to disable in the date picker calendarenter image description here. You put the days in the "Add Weekend" field, and select "Disabled Weekend?" switch ON. It also has a feature to disable specific dates. Going a little beyond the answer: The time picker sets the available hours and time increment. This applies to all days. Since my hours vary with the day of the week, I used (free) Conditional Fields for Contact Form 7.

day of the week
[select daysdropdown " " "sunday" "monday" "thursday" "friday" "saturday"]

[group sunday] time
[select sundayhours " " "12:00" "12:30" "1:00" "1:30" "2:00" "2:30" "3:00" "3:30" "4:00" "4:30" "5:00" "5:30" "6:00" "6:30" "7:00" "7:30" "8:00" "8:30"] [/group]

[group monday] time
[select mondayhours " " "3:00" "3:30" "4:00" "4:30" "5:00" "5:30" "6:00" "6:30" "7:00" "7:30" "8:00" "8:30"] [/group]

Upvotes: 0

Naevehane
Naevehane

Reputation: 1

Don't bother. If you're like me and countless others than you've already discovered that there is no easy answer for excluding days whether by name or day of the month with ContactForm7 via the Date/Calendar field. A simple alternative is to use Conditional Fields and Select Lists. Here's one using numbers as days of the month. I'm sure this method could be modified to suit most similar purposes.

Example:

<label>Arrival Date*
[select* ARRIVE-MONTH "JAN" "FEB" "MAR" "APR" "MAY" "JUN" "JUL" "AUG" "SEP" "OCT" "NOV" "DEC"]  </label>

[group ARR-TWENTYEIGHT]
[select* ARRTWENTYEIGHT include_blank "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28"]
[/group]

[group ARR-THIRTY]
[select* ARRTHIRTY include_blank "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30"]
[/group]

[group ARR-THIRTYONE]
[select* ARRTHIRTYONE include_blank "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31"]
[/group]

[group ARR-HOLIDAY-DEC]
[select* ARRHOLIDAY-DEC include_blank "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16"]
[/group]

[group ARR-HOLIDAY-JAN]
[select* ARRHOLIDAY-JAN include_blank "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31"]
[/group]

CONDITIONAL FIELDS (text mode)

show [ARR-HOLIDAY-JAN] if [ARRIVE-MONTH] equals "JAN"
show [ARR-TWENTYEIGHT] if [ARRIVE-MONTH] equals "FEB"
show [ARR-THIRTYONE] if [ARRIVE-MONTH] equals "MAR"
show [ARR-THIRTYONE] if [ARRIVE-MONTH] equals "APR"
show [ARR-THIRTYONE] if [ARRIVE-MONTH] equals "MAY"
show [ARR-THIRTY] if [ARRIVE-MONTH] equals "JUN"
show [ARR-THIRTYONE] if [ARRIVE-MONTH] equals "JUL"
show [ARR-THIRTYONE] if [ARRIVE-MONTH] equals "AUG"
show [ARR-THIRTY] if [ARRIVE-MONTH] equals "SEP"
show [ARR-THIRTYONE] if [ARRIVE-MONTH] equals "OCT"
show [ARR-THIRTY] if [ARRIVE-MONTH] equals "NOV"
show [ARR-HOLIDAY-DEC] if [ARRIVE-MONTH] equals "DEC"

.. and for your email messages:

Enable: Exclude lines with blank mail-tags from output

Message Body:

Arrival: [ARRIVE-MONTH] 
DAY:
[ARRTWENTYEIGHT]
[ARRTHIRTY]
[ARRTHIRTYONE]
[ARRHOLIDAY-DEC]
[ARRHOLIDAY-JAN]

Upvotes: 0

Howard E
Howard E

Reputation: 5669

If you're using the jQuery UI Datepicker, do not use the [date] field option in Contact Form 7. Using the date type will enable the browser based datepicker.

Use

[text appt-date]

Instead.

Upvotes: 1

Related Questions