在引导日期选择器更改月份事件不起作用

Question

我的网站上有一个预订可用性检查部分。我用过bootstrap datepicker。

首次加载页面时，我正在使用jquery ajax和php从数据库中获取一些日期，以禁用datepicker日历上的日期。所以，我用了setDatesDisabled。在第一次加载日期选择器时，它工作正常。

当我更改月份时，我得到json响应，但datepicker上的日期未禁用。我已经尝试了changeMonth事件，但是没有用。请帮我解决这个问题

杰森回应

disableDates:["13.01.2018", "20.01.2018", "27.01.2018"]

$("#dateFrom").datepicker({
                autoclose: true,
                todayHighlight: true,
                format: 'dd.mm.yy',
                startDate: new Date()
            }).on('show', function(e) {
                $.ajax({
                    url: '/cabinowner/bookings/availability',
                    dataType: 'JSON',
                    type: 'POST'
                })
                    .done(function( response ) {
                        $("#dateFrom").datepicker('setDatesDisabled', response.disableDates);
                    })
                    .fail(function(response, jqxhr, textStatus, error) {
                    });
            });

            $("#dateFrom").datepicker().on('changeMonth', function(e) {
                $.ajax({
                    url: '/cabinowner/bookings/availability',
                    dataType: 'JSON',
                    type: 'POST',
                    data: { date : moment(e.date).format('YY-MM-DD') }
                })
                    .done(function( response ) {
                        // here response is getting but next month is not showing
                        $("#dateFrom").datepicker('setDatesDisabled', response.disableDates);
                    })
                    .fail(function(response, jqxhr, textStatus, error) {
                    });
            });

            $("#dateFrom").datepicker().on('changeDate', function(e) {
                var temp   = $(this).datepicker('getDate');
                var start  = new Date(temp);
                start.setDate(start.getDate() + 1); // Here date is setting greater than start date

                var end    = new Date(start);
                end.setDate(end.getDate() + 60);

                $("#dateTo").datepicker({
                    autoclose: true,
                    format: 'dd.mm.yy',
                    startDate: start,
                    endDate: end
                });
            });

Answer 1

下个月未显示，因为setDatesDisabled一个月后发生了更改。有一个带有超时的演示，可以观看它的运行。

发生这种情况的原因是，最后该viewDate属性已更新，并且将其设置为 startDateoption或默认值（今天）。在datepicker重新呈现时-它显示电流viewDate因此在一个月后更改。

您可以尝试在updateViewDate初始化日期选择器时禁用该选项。

演示版

var dp = $('input').datepicker({
                autoclose: true,
                todayHighlight: true,
                format: 'dd.mm.yyyy',
                startDate: new Date(),
                updateViewDate: false
            });    

dp.on('changeMonth', function (e) {    
    dp.datepicker('setDatesDisabled', ["13.01.2018", "20.01.2018", "27.01.2018"]);
});