I am using eternicode bootstrap-datepicker;

I would like to know how to configure Bootstrap Datepicker to restrict available dates to be selected. My point is, when some data is ready in a particular date. That date can be selected by user.

At the current point, I am restricting by 7 days from now. However, Saturday and Sundays are days which never have some data;

In this way, I can just show a range of dates, but no "holes" between those ranges. So, I would like to know how to configure Bootstrap Datepicker to restrict available dates to be selected from user.

I am using eternicode bootstrap-datepicker;

I would like to know how to configure Bootstrap Datepicker to restrict available dates to be selected. My point is, when some data is ready in a particular date. That date can be selected by user.

At the current point, I am restricting by 7 days from now. However, Saturday and Sundays are days which never have some data;

In this way, I can just show a range of dates, but no "holes" between those ranges. So, I would like to know how to configure Bootstrap Datepicker to restrict available dates to be selected from user.

• javascript
• jquery
• twitter-bootstrap
• datepicker

• As far as I know there is no DatePicker integrated in Bootstrap. Are you using a third-party datepicker (maybe JQuery-ui?) – Gabriel S. Commented Jan 15, 2014 at 19:27
• The docs give an example of disabling dates. Just modify the return as needed. – Blazemonger Commented Jan 15, 2014 at 19:28
• Sorry, You're totally right. Im using eternicode bootstrap-datepicker – meetnick Commented Jan 15, 2014 at 19:35

2 Answers 2

Bootstrap itself does not have a built in datepicker last i checked. If however you are talking about the bootstrap-datepicker third party library that eternicode wrote.. I believe it supports the same events as the jquery datepicker.. so:

beforeShowDay Function(Date). Default: $.noop

A function that takes a date as a parameter and returns one of the following values:

• undefined to have no effect
• A Boolean, indicating whether or not this date is selectable
• A String representing additional CSS classes to apply to the date’s cell
• An object with the following properties:
  • enabled: same as the Boolean value above
  • classes: same as the String value above
  • tooltip: a tooltip to apply to this date, via the title HTML attribute

usage something like this (below example only allows weekends and the two dates in the custom array below to be selected):

// use this to allow certain dates only
var availableDates = ["15-1-2014","16-1-2014"];

$(function()
{
    $('#txtDate').datepicker({ 
      beforeShowDay:
          function(dt)
          { 
            // use dt.getDay() to restrict to certain days of the week
            // or a custom function like "available" below to do more complex things
            return [dt.getDay() == 0 || dt.getDay() == 6 || available(dt), "" ];
          }
    });
});



function available(date) {
    dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
    if ($.inArray(dmy, availableDates) != -1) {
        return true;
    } else {
        return false;
    }
}

Lastly, a working FIDDLE to show above in action.. using jquery datepicker, but same difference...

Make as following:

var available_Dates = ["23/03/2014","21/03/2014"];
            $('.datepicker').datepicker({
                language: "pt-BR",
                autoclose: true,
                format: "dd/mm/yyyy",
                default: 'dd/mm/yyyy',
                beforeShowDay: function(date){
                    var formattedDate = $.fn.datepicker.DPGlobal.formatDate(date, 'dd/mm/yyyy', 'pt-BR');
                    if ($.inArray(formattedDate.toString(), available_Dates) == -1){
                        return {
                            enabled : false
                        };
                    }
                    return;
                }
            });