Question

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

当第一次加载页面时，我使用jquery ajax＆amp ;;来获取一些日期。从数据库的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
                });
            });

Answer 1

下个月没有显示，因为setDatesDisabled每月都会更改。有demo超时可以查看它的实际效果。

这是因为最后更新了viewDate属性并将其设置为startDate option or default value (today)。在datepicker rerender上 - 它显示当前viewDate因此会在一个月后更改。

初始化datepicker时，您可以尝试禁用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"]);
});

Answer 2

我认为你在这里引用了错误，你在同一个元素上添加了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 3

您正在尝试创建多个数据贴纸，且必须只有1个。
您可以使用var保存datepicker init。如果您想稍后访问它，请使用它
showpicker on show将在启动时更改，更改月份，更改年份等（每次显示表格）。所以我们需要将变量设置为仅在datepicker启动时调用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>

在bootstrap datepicker中，更改月份事件不起作用

3 个答案: