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

Question

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

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

当我更改月份时，我收到了 json 响应，但日期选择器并未禁用日期。我试过 changeMonth 事件但没有用。请帮我解决这个问题

Json 回应

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

我认为您在这里的引用有误，您在同一个元素上添加了 3 个不同的日期选择器。这应该有效：

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

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
            datePicker.setDatesDisabled(response.disableDates);
        })
        .fail(function (response, jqxhr, textStatus, error) {
        });
});

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 2

您正在尝试创建多个数据选择器，但必须只有 1 个。
你可以用var保存datepicker init。如果您以后想访问它，请使用它
显示的日期选择器将在启动时调用，更改月份，更改年份等（每次 table 显示）。所以我们需要设置一个变量只在日期选择器启动时调用 ajax。在这里，我将其命名为 opened

试试这个

 $(function(){
  var opened = false;
  var dp = $('.datepicker').datepicker({
   autoclose: true,
   todayHighlight: true,
   format: 'dd.mm.yy',
   startDate: new Date(),
  }).on('show', function(){
   if(!opened){
    $.ajax({
     url: 'https://api.jsonbin.io/b/5a4005be0401cf6341fb830b', //["28.12.2017","20.01.2018","27.01.2018"]
     dataType: 'json',
     type: 'get',
     success: function(d){
      opened = true;
      dp.datepicker('setDatesDisabled', d);
     },
     error: function(){
      alert('error');
     }
    });
   }
  });
 });

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"/> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.min.css" />

<style>
        .datepicker-dropdown table td.disabled, .datepicker-dropdown table td.disabled:hover {
            background: rgba(255, 0, 0, 0.13) !important;
            color: red !important;
            cursor: not-allowed !important;
        }
</style>
</head>
<body>

<input type="text" class="datepicker">

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

</body>
</html>

Answer 3

下个月没有显示，因为 setDatesDisabled 改回了一个月。有一个 demo 超时可以看到它的实际效果。

发生这种情况是因为最后更新了 viewDate 属性并将其设置为 startDate option or default value (today)。在 datepicker 重新渲染时 - 它显示当前 viewDate 因此改变了一个月。

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

Demo

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

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

In bootstrap datepicker change month event is not working

javascript

jquery

datepicker

bootstrap-datepicker