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
});
});
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"]);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With