CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdatepicker
meetnick
meetnick

Reputation: 1196

Bootstrap Datepicker restrict available dates to be selected

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.

Upvotes: 9

Views: 40043

Answers (2)

meetnick
meetnick

Reputation: 1196

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;
                }
            });

Upvotes: 2

erikrunia
erikrunia

Reputation: 2383

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...

Upvotes: 13

Related Questions