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
});
});
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
});
});
- If you accepted the answer and it helped you the award the bounty to @Grin. It is ending in 1 hour. – Divya Commented Dec 28, 2017 at 9:10
3 Answers
Reset to default 8 +50Next 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"]);
});
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
});
});
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./bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare./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./jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
</body>
</html>