Question

我正在使用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中的可用日期？

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

Answer 2

ADDING DAYS TO DATEPICKER

更好的做法是使用几天的数组，并使用JQUERY，MOMENTJS将它们动态地添加到datepicker中

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

Bootstrap datepicker - 动态更新可用日期

2 个答案: