Bootstrap日期选择器更改月份事件无效。

Question

Bootstrap日期选择器更改月份事件无效。

javascriptjquerydatepickerbootstrap-datepicker

5

我网站上有一个预订可用性检查部分，我使用了bootstrap datepicker。当页面首次加载时，我使用jquery ajax和php从数据库中获取一些日期来禁用datepicker日历上的日期。因此，我使用了setDatesDisabled。datepicker第一次加载时它可以正常工作。

当我更改月份时，我会收到json响应，但是datepicker上的日期没有被禁用。我尝试使用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
                });
            });

- Sarath TS

如果您接受了答案并且它对您有所帮助，请授予@Grin赏金。它将在1小时内结束。 - Divya

3个回答

1

您正在尝试创建多个日期选择器，但只能有一个。
您可以使用变量保存日期选择器的初始化，并在以后需要访问它时使用。
每次显示日期选择器时都会调用onShow事件，例如启动、更改月份、更改年份等（每次显示表格）。因此，我们需要设置一个变量，仅在日期选择器启动时才调用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>

- plonknimbuzz

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

- DarkMukke

我尝试了这段代码，但是在控制台中出现了错误 Uncaught TypeError: datePicker.setDatesDisabled is not a function。 - Sarath TS

我认为这可能是一个异步问题。也许在回调之前需要做一些事情。但我不知道如何处理。我正在使用http://bootstrap-datepicker.readthedocs.io/en/latest/包。 - Sarath TS

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Grin · Accepted Answer

由于setDatesDisabled更改了月份，因此下个月不会显示。您可以在演示中查看它的效果。这是由于最后更新了viewDate属性，并将其设置为startDate选项或默认值（今天）。当重新渲染datepicker时，它显示当前的viewDate，从而使月份向前更改。您可以尝试在初始化datepicker时禁用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"]);
});