Bootstrap Datepicker datesDisabled with dynamic generated array not working

Question

with this Snippet i store the Array of dates between 2 dates in a variable "disabled" to disable the dates in a bootstrap datepicker.

var startdate1 = $(".startdate1").text();
var enddate1 = $(".enddate1").text();

var daysBetweenDates = function(startdate1, enddate1) {
  var now = startdate1, dates = [];
  while (now.isBefore(enddate1) || now.isSame(enddate1)) {
    dates.push(now.format("\"D.M.YYYY\""));
    now.add('days', 1);
  }
  return dates;
};

var fromDate = moment(startdate1,"DD.MM.YYYY");
var toDate   = moment(enddate1,"DD.MM.YYYY");
var results  = daysBetweenDates(fromDate, toDate).join(', ');

$('#results').html(results);
var disabled = results;

the output in frontend is: "15.2.2018", "16.2.2018", "17.2.2018", "18.2.2018", "19.2.2018", "20.2.2018", "21.2.2018", "22.2.2018", "23.2.2018", "24.2.2018", "25.2.2018", "26.2.2018"

the Bootstrap datepicker disables the dates only if the array of dates is hardcoded in my datepicker instance but not with the variable in it:

$('.bdates').datepicker({
  format:                "dd.mm.yyyy",
  keyboardNavigation:    false,
  daysOfWeekDisabled:    "2,3,4,5,6",
  daysOfWeekHighlighted: "0,1",
  calendarWeeks:         true,
  autoclose:             true,
  todayHighlight:        true,
  updateViewDate:        false,
  datesDisabled:         disabled,
  startDate:             startdate,
  endDate:               enddate,
  language:              "de"
});

Have a look in this fiddle jsfiddle.net/8k1um9k9/

What is going wrong? Can someone give me please a solution?! thank you!

Phani Kumar M · Accepted Answer · 2017-09-22 10:41:37Z

1

Can you try with the updated code below. The changes made are commented out with //Changed here in code. Basically, you need to pass array of dates to datesDisabled.

var daysBetweenDates = function (startdate1, enddate1) {
    var now = startdate1, dates = [];
    while (now.isBefore(enddate1) || now.isSame(enddate1)) {
        dates.push(now.format("D.M.YYYY")); //Changed here
        now.add('days', 1);
    }
    return dates;
};

var fromDate = moment(startdate1, "DD.MM.YYYY");
var toDate = moment(enddate1, "DD.MM.YYYY");
var results = daysBetweenDates(fromDate, toDate); //Changed here
var disabled = results; //Changed here

$('#results').html(results.join(', ')); //Changed here
//var disabled = results;

//this datepicker is not working with disabled dates variable
$('.bdate').datepicker({
    format: "dd.mm.yyyy",
    keyboardNavigation: false,
    //      forceParse: false,
    daysOfWeekDisabled: "2,3,4,5,6",
    daysOfWeekHighlighted: "0,1",
    calendarWeeks: true,
    autoclose: true,
    todayHighlight: true,
    //updateViewDate: false,
    datesDisabled: disabled, //Changed here
    startDate: startdate,
    endDate: enddate,
    //language: "de"
});

edited Sep 22, 2017 at 10:41

answered Sep 22, 2017 at 10:27

Phani Kumar M

4,5781 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Suresh Kamrushi Over a year ago

not working for me

Collectives™ on Stack Overflow

Bootstrap Datepicker datesDisabled with dynamic generated array not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related