Datepicker will not render next months?

Your problem lies in the onSelect method, when you select the date you try to instantiate again, causing it to continue for the next few months.

$(".date-picker").datepicker({
  numberOfMonths: 3,
  beforeShowDay: function(date) {
    var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#date-from").val());
    var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#date-to").val());
    return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
  },
  onSelect: function(dateText, inst) {
    var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#date-from").val());
    var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#date-to").val());
    if (!date1 || date2) {
      $("#date-from").val(dateText);
      $("#date-to").val("");
      //  $(this).datepicker("option", "minDate", dateText);
    } else {
      $("#date-to").val(dateText);
      //  $(this).datepicker("option", "minDate", null);
    }
  }
});

The commented lines are your problem, what you are trying to do in them may be wrong.

The cool thing would be to do something like this: jsfiddle

This article helped me a lot:

link