4

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.

Scott C Wilson
  • 19,102
  • 10
  • 61
  • 83

4 Answers4

3

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;        
    }
})
dm4web
  • 4,642
  • 1
  • 14
  • 20
  • Just before the beforeShowDay function I also added `daysOfWeekDisabled: "0",` in order to block sundays as well. – Scott C Wilson Dec 28 '14 at 13:59
  • 1
    With version 1.3.1+ you can simply use `datesDisabled` option: http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#datesdisabled – Davi Lima May 25 '15 at 23:26
2

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

Davi Lima
  • 800
  • 1
  • 6
  • 20
  • Also see: http://stackoverflow.com/questions/10234153/limit-bootstrap-datepicker-to-weekdays-only – Davi Lima Sep 04 '15 at 02:34
  • 1
    Quick question and how: Can we only change the background color to some for only warning to user while picking dates ? – Anupal Jan 25 '16 at 06:18
0

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;
   });
},
Shujat Munawar
  • 1,657
  • 19
  • 23
0

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" />
A SHAHZAD
  • 176
  • 2