CODEWITHSUNDEEP
javascriptjquerydatepickerbootstrap-datepicker
Ricardo Machado
Ricardo Machado

Reputation: 782

Bootstrap date picker, enable a few days in daysOfWeekDisabled

Bootstrap datePicker allows me to pass a parameter to disabled an specific day of the week. Like this:

datePicker.datepicker({
    daysOfWeekDisabled: weekendDays
});

I want to be able to enable an specific date on this disabled list. I was trying to use the beforeShowDay option, but it's seems that I can disable the dates there but I can't enable.

According to the documentation I can return a boolen to point if I want the value to be seleced, or I can return a object with enabled property, like this:

datePicker.datepicker({
    daysOfWeekDisabled: weekendDays,
    beforeShowDay: function (date) {
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        if(workingDays.indexOf(string) > -1){
            return {enabled: true, classes: "test"};
        }
    }
});

I can add the class using the beforeShowDay, I can disabled the date. But I can't enable it.

Does anyone know how I can do that?

Upvotes: 1

Views: 1243

Answers (2)

Ricardo Machado
Ricardo Machado

Reputation: 782

I ended up going with an work around using onShow event like this

datePicker.datepicker({
    daysOfWeekDisabled: weekendDays,
    beforeShowDay: function (date) {
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        if(workingDays.indexOf(string) > -1){
            return {enabled: true, classes: "force-enabled-day"};
        }
    }
}).on('show', function(e){
    $(".force-enabled-day").removeClass("disabled disabled-date");
});

I will marc Dhruv answer as correct because it's a solution that looks more elegant than my work around.

Upvotes: 0

Dhruv Shah
Dhruv Shah

Reputation: 1651

I would suggest combining both the operations of disabling the weekend dates and enabling certain dates into one.

For example:

var dates = ["19/07/2020"];

function disableDates(date) {
    let shouldDisable = false;
    
    // Disable dates if they are weekends
    if(date.getDay() == 0 || date.getDay() == 6){
      shouldDisable = true;
    }
    
    // Check if date is mentioned for enabling in the dates array. 
    var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
    return [ !shouldDisable || dates.indexOf(string) != -1];
}

$(function() {
     $("#date").datepicker({
         beforeShowDay: disableDates
     });
});

This will provide more control over enabling and disabling dates using one single function.

Sample fiddle: https://jsfiddle.net/idhruvs/wdkprbsL/120/

Upvotes: 1

Related Questions