Bootstrap datepicker configuration to block specific dates (holidays)

问题

Has anyone figured out how to configure datepicker to not display specific dates (such as, say, July 4th)? It would seem that this could be done using the beforeShowDay but I'm not positive.

回答1:

http://jsfiddle.net/Lr3taznx/

//a array of dates that should be blocked
var forbidden=['12/25/2014','12/24/2014']

$('#datepicker').datepicker({
    beforeShowDay:function(Date){
        //
        var curr_day = Date.getDate();
        var curr_month = Date.getMonth()+1;
        var curr_year = Date.getFullYear();        
        var curr_date=curr_month+'/'+curr_day+'/'+curr_year;        

        if (forbidden.indexOf(curr_date)>-1) return false;        
    }
})

OR:

http://jsfiddle.net/zsqvjvkd/1/

var forbidden=['2014-12-25','2014-12-24']

$('#datepicker').datepicker({
    beforeShowDay:function(Date){
        var curr_date = Date.toJSON().substring(0,10);

        if (forbidden.indexOf(curr_date)>-1) return false;        
    }
})

回答2:

With version 1.3.1+ you can simply use datesDisabled option: http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#datesdisabled

回答3:

Use this below code to disable the dates from Twitter Bootstrap DatePicker: You have to use moment for that just include moment.js:

var disabledDates = ['2018-01-07', '2018-01-27']

beforeShowDay: function (Date) {        
   $('#datepicker').datepicker({
        var date = moment(Date).format('YYYY-MM-DD');
        if (disabledDates.indexOf(curr_date) > -1) return false;
   });
},

回答4:

Main Url: https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#enddate

with the above date picker version, use data-date-dates-disabled as shown in the code, you can pass comma separated date values. and make sure that format of date should be same what you define in data-date-format property as shown below.

                <input 
                       asp-for="From" 
                       name="From" 
                       id="fromDatePickerId" 
                       value="@Model.From" 
                       class="DateClass form-control"
                       data-date-format="dd/mm/yyyy" 
                       data-date-start-date="@Model.From" 
                       data-date-end-date="@Model.To" 
                       data-provide="datepicker" 
           data-date-dates-disabled = "23/11/2019,24/11/2019" />    

来源：https://stackoverflow.com/questions/27641781/bootstrap-datepicker-configuration-to-block-specific-dates-holidays