Bootstrap datepicker - 动态更新可用日期答案

【问题标题】：Bootstrap datepicker - update available dates dynamicallyBootstrap datepicker - 动态更新可用日期
【发布时间】：2016-12-03 11:43:33
【问题描述】：

我正在使用 bootstrap-datepicker 小部件。我的页面上有两个日期选择器，一个用于开始日期，一个用于结束日期。我需要以开始日期晚于结束日期的方式限制选择日期，反之亦然。所以我为这些日期选择器添加了startDate 和endDate 属性的逻辑：

$(document).ready(function () {
    $('#txtEndDate').datepicker({
        startDate: new Date($("#txtStartDate").val()),
        orientation: "bottom auto"
    });
    $('#txtStartDate').datepicker({
        endDate: new Date($("#txtEndDate").val()),
        orientation: "bottom auto"
    });
    $('#txtEndDate').change(function() {
        $('#txtStartDate').datepicker({
            endDate: new Date($(this).val())
        });
    });
    $('#txtStartDate').change(function() {
        $('#txtEndDate').datepicker({
            startDate: new Date($(this).val())
        });
    });
});

它仅在页面加载时工作正常，但如果其中一个日期已更改但尚未保存，则另一个 datepicker 不会根据此更改立即更新，我可以在其中选择不合适的日期。只有在我保存更改并刷新整个页面后，datepicker 中的可用日期才会更新。

我应该在此处添加什么以动态更新我的datepickers 中的可用日期？

【问题讨论】：

标签： jquery twitter-bootstrap date datepicker

【解决方案1】：

我已经想通了。这对我有用：

$(document).ready(function () {
    var startDate = $("#txtStartDate").val();
    var endDate = $("#txtEndDate").val();
    $('#txtEndDate').datepicker({
        beforeShowDay: function(date){
            if (startDate) {
                return new Date(startDate).getTime() <= date.getTime();
            } else {
                return true
            }
        }
    }).on("changeDate",function() {
        $('#txtStartDate').datepicker('setEndDate', $(this).val());
    });
    $('#txtStartDate').datepicker({
        beforeShowDay: function(date){
            if (endDate) {
                return new Date(endDate).getTime() >= date.getTime();
            } else {
                return true;
            }
        }
    }).on("changeDate",function() {
        $('#txtEndDate').datepicker('setStartDate', $(this).val());
    });
});

【讨论】：

【解决方案2】：

ADDING DAYS TO DATEPICKER

这样更好，有一个天数组并使用 JQUERY、MOMENTJS 动态地将它们添加到日期选择器

var availableDates = ["02-01-2020","03-01-2020","04-01-2020","05-01-2020","06-01-2020"];

function available(date) {
  dayCustom = moment(date).format('DD-MM-YYYY');
  var valid = availableDates.includes(dayCustom)?false:true;/* false/true inverse days available */
  var _tooltip = valid ? '' : 'YA SELECCIONADO';
  return [valid, "",_tooltip];
}

$('#date').datepicker({ beforeShowDay: available });

【讨论】：