In bootstrap datepicker change month event is not working

Question

I have a booking availability checking section on my website. I used bootstrap datepicker.

When page loads first time, I am fetching some dates using jquery ajax & php from database to disable dates on datepicker calendar. So, I used setDatesDisabled. On first loads of datepicker it is works fine.

When I change month I am getting json response but dates are not disabled on datepicker. I have tried with changeMonth event but not working. Please help me to solve this issue

Json response

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

Solution 1

Next month is not showing because setDatesDisabled changes month back. There is a demo with timeout to see it in action.

It happens because at the end the viewDate property is updated and it is set to startDate option or default value (today). On datepicker rerender - it shows the current viewDate thus changes month back.

You can try to disable updateViewDate option when datepicker is initialized.

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

Solution 2

I think you got the reference wrong here, you are adding 3 different datepickers on the same element. This should work :

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

Solution 3

• you are trying to create multiple datapicker which must be only 1.

• you can save datepicker init with var. and use it if you want access it later

• datepicker on show will recalled on startup, change month, change year etc (every time table displayed). so we need to set a variable to only call ajax on datepicker startup only. in here, i name it opened

try this

	$(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>