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

Posted 2023-05-07

【中文标题】在引导日期选择器更改月份事件不起作用

【英文标题】：In bootstrap datepicker change month event is not working

【发布时间】：2018-05-21 16:02:17

【问题描述】：

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

第一次加载页面时，我使用 jquery ajax 和 php 从数据库中获取一些日期以禁用 datepicker 日历上的日期。所以，我使用了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
                );
            );

【问题讨论】：

如果您接受了答案并且它帮助您将赏金奖励给了@Grin。 1 小时后结束。

【参考方案1】：

下个月没有显示，因为setDatesDisabled 改了一个月。 有一个 demo 有超时时间来查看它的运行情况。

发生这种情况是因为最后 viewDate 属性已更新并将其设置为 startDate option or default value (today)。 在 datepicker 重新渲染时 - 它显示当前的 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"]);
);

【参考方案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
    );
);

【讨论】：

我已经尝试过这段代码，但在控制台Uncaught TypeError: datePicker.setDatesDisabled is not a function

中出现错误

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

【参考方案3】：

您正在尝试创建多个数据选择器，必须只有 1 个。

您可以使用 var 保存 datepicker init。如果您以后想访问它，请使用它

显示的日期选择器将在启动、更改月份、更改年份等（显示的每个时间表）时调用。所以我们需要设置一个变量只在 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>