Bootstrap datepicker - 动态更新可用日期 [英] Bootstrap datepicker - update available dates dynamically

问题描述

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

$(document).ready(function () {$('#txtEndDate').datepicker({startDate: 新日期($("#txtStartDate").val()),方向:底部自动"});$('#txtStartDate').datepicker({结束日期:新日期($(#txtEndDate").val())，方向:底部自动"});$('#txtEndDate').change(function() {$('#txtStartDate').datepicker({结束日期:新日期($(this).val())});});$('#txtStartDate').change(function() {$('#txtEndDate').datepicker({开始日期:新日期($(this).val())});});});

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

为了动态更新我的 datepickers 中的可用日期，我应该在此处添加什么?

解决方案

添加日期选择器

这更好，有一组日期并使用 JQUERY、MOMENTJS 动态地将它们添加到 datepicker

var availableDates = ["02-01-2020","03-01-2020","04-01-2020","05-01-2020","06-01-2020"];功能可用(日期){dayCustom = moment(date).format('DD-MM-YYYY');var valid = availableDates.includes(dayCustom)?false:true;/* false/true 可用天数 */var _tooltip = 有效?'' : 'YA SELCCIONADO';返回[有效，"，_工具提示]；}$('#date').datepicker({ beforeShowDay: available });

I'm using a bootstrap-datepicker widget. I have two datepickers on my page, one for start date and one for end date. I need to restrict selecting dates in a way that start date goes after end date and vice versa. So I'm adding a logic for startDate and endDate properties to these datepickers:

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

It works fine only on page load, but if one of the dates is changed and not saved yet, the other datepicker is not updated immediately according this changes, and I am able to select inappropriate date in it. The available dates in that datepicker are updated only after i save changes and the whole page refreshes.

What should I add here in order to update available dates in my datepickers dynamically?

解决方案

ADDING DAYS TO DATEPICKER

This is better, to have an array of days and adding them dinamically to datepicker using 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 });

这篇关于Bootstrap datepicker - 动态更新可用日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！