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.

  • Add class to a multiple/specific day in bootstrap datepicker?
  • Angular 2 with javascript and datepicker
  • Why I can't use datepicker twice in the same table?
  • Airbnb react date range picker only showing current month calendar not selected dates month calender
  • jQuery datepicker working in front end but not wordpress admin dash
  • Set initial value in datepicker with jquery?
  • 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.

  • Datepicker for web page that can allow only specific dates to be clicked
  • Jquery .live works but not with .datepicker
  • Disable previous dates of a datepicker according to selected date in javascript or jquery
  • jQuery Datepicker for multiple inputs
  • bootstrap-datepicker set language globally
  • jQuery Datepicker unix timestamp
  • 2 Solutions collect form web for “Bootstrap Datepicker restrict available dates to be selected”

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