禁用特定日期并在jQuery datepicker中启用星期几

Question

I'm trying to disable specific dates and enable only specific days of the week on a jQuery UI datepicker.

This is inside a Wordpress/Woocommerce theme and I'm trying to solve some bugs but I'm here for hours trying to figure out for a solution and even tried every solution I found on StackOverflow and other websites, but nothing seems to work.

My objective is to enable only chosen days of the week to be available, but when a date is chosen and bought, I need to disable it too. I successfully disabled the days of the week that I need to be disabled, but I can't do even a hardcoded prototype about the bought dates that should be disabled.

The code (with some hardcoded sample):

$(document).ready(function(){
    var available_days = ["3"]; //it comes from the database
    var today = new Date();
    var tour_start_date = new Date( 1525132800000 ); //it comes from the database
    var tour_end_date = new Date( 1546214400000 ); //it comes from the database
    var available_first_date = tour_end_date;
    var lang = 'en_UK';

    lang = lang.replace( '_', '-' );

    today.setHours(0, 0, 0, 0);
    tour_start_date.setHours(0, 0, 0, 0);
    tour_end_date.setHours(0, 0, 0, 0);

    if ( today > tour_start_date ) {
        tour_start_date = today;
    }

    function DisableDays(date) {
        var day = date.getDay();

        if ( available_days.length == 0 ) {
            if ( available_first_date >= date && date >= tour_start_date) {
                available_first_date = date;
            }
            return true;
        }

        if ( $.inArray( day.toString(), available_days ) >= 0 ) {
            if ( available_first_date >= date && date >= tour_start_date) {
                available_first_date = date;
            }
            return true;
        } else {
            return false;
        }
    }
    if ( $('input.date-pick').length ) {
        if ( lang.substring( 0, 2 ) != 'fa' ) {
            $('input.date-pick').datepicker({
                startDate: tour_start_date,
                endDate: tour_end_date,
                beforeShowDay: DisableDays,
                language: lang
            });
            $('input[name="date"]').datepicker( 'setDate', available_first_date );
        } else {
            var date_format = $('input.date-pick').data('date-format');
            $('input.date-pick').persianDatepicker({
                observer: true,
                format: date_format.toUpperCase(),
            });
        }
    }
});

Answer 1

Please review: http://api.jqueryui.com/datepicker/#option-beforeShowDay

A function that takes a date as a parameter and must return an array with:

[0] : true/false indicating whether or not this date is selectable

[1] : a CSS class name to add to the date's cell or "" for the default presentation

[2] : an optional popup tooltip for this date

The issue in your code was that you were only returning true or false when an Array was needed. For example:

 $(function() { var available_days = ["3", "5"]; //it comes from the database var today = new Date(); var tour_start_date = new Date(1525132800000); //it comes from the database var tour_end_date = new Date(1546214400000); //it comes from the database var available_first_date = tour_end_date; var lang = 'en_UK'; lang = lang.replace('_', '-'); today.setHours(0, 0, 0, 0); tour_start_date.setHours(0, 0, 0, 0); tour_end_date.setHours(0, 0, 0, 0); if (today > tour_start_date) { tour_start_date = today; } function DisableDays(date) { var day = date.getDay(); var found = false; if (available_days.length == 0) { if (available_first_date >= date && date >= tour_start_date) { available_first_date = date; } found = true; } if ($.inArray(day.toString(), available_days) >= 0) { console.log(day + " in Array"); if (available_first_date >= date && date >= tour_start_date) { available_first_date = date; } found = true; } console.log(day, found); return [found, "tour-date", "Tour Date"]; } if ($('input.date-pick').length) { if (lang.substring(0, 2) != 'fa') { $('input.date-pick').datepicker({ startDate: tour_start_date, endDate: tour_end_date, beforeShowDay: DisableDays, language: lang }); $('input[name="date"]').datepicker('setDate', available_first_date); } else { var date_format = $('input.date-pick').data('date-format'); $('input.date-pick').persianDatepicker({ observer: true, format: date_format.toUpperCase(), }); } } }); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.12.4.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> Date: <input type="text" class="date-pick" name="date" />