How to disable all the days in datepicker instead of provided days?

Question

I have a datepickerin which I am doing two operations. Firstly I try to bold the days which are provided in the form of array Secondly, I am trying to disable all the other days which are not in the provided array. In result of my code, all the days which are provided in the array are now bold but I can't able to disable other days which are not in the array. I checked this answer but it didn't works. This is my datepicker:

                    <?php
                        echo DatePicker::widget([
                            'name' => 'check_multiple_date',
                            'type' => DatePicker::TYPE_INLINE,
                            'options' => ['placeholder' => 'Select issue date ...', 'id' => 'date-picker-multiple-half-hour', 'toggleActive' => true],
                            'pluginOptions' => [
                                'format' => 'dd-M-yyyy',
                                'todayHighlight' => false,
                                'multidate' => true,
                                'beforeShowDay' => new JsExpression($JsBeforeDayMultipleHalfHour)
                            ],
                        ]);
                    ?>

And this is my code for disable and to bold the text of those dates to which are in an array named $thirty_minutes_dates

$JsBeforeDayMultipleHalfHour = <<<EOF
    function(date){
        var dates = new Array();
        dates = {$thirty_minutes_dates};
        var year = date.getFullYear(), month = date.getMonth(), day = date.getDate();
        for (var i=0; i < dates.length; ++i) {
            if (year == parseInt(dates[i][0]) && month == parseInt(dates[i][1]) - 1 &&  day == parseInt(dates[i][2])) {
                return {classes: 'bold-text'};
            }
        return [false, ''];
        }
     }
EOF;

score 0 · Answer 1 · answered Oct 16 '18 at 19:58

The code for disabling and bold the text should be like this:

$JsBeforeDayMultipleHalfHour = <<<EOF
function(date){
    var dates = new Array();
    dates = {$thirty_minutes_dates};
    var year = date.getFullYear(), month = date.getMonth(), day = date.getDate();
    for (var i=0; i < dates.length; ++i) {
        if (year == parseInt(dates[i][0]) && month == parseInt(dates[i][1]) - 1 &&  day == parseInt(dates[i][2])) {
            return {classes: 'bold-text'};
        }
    return {classes: 'ui-datepicker-unselectable ui-state-disabled'};
    }
 }
EOF;

Instead of returning false It must return the class which is used for disabling the days. I hope this is the correct answer.

How to disable all the days in datepicker instead of provided days?

1 Answers1