uxsolutions / bootstrap-datepicker

A datepicker for twitter bootstrap (@twbs)
Apache License 2.0
12.68k stars 6.06k forks source link

In bootstrap datepicker change month event is not working #2314

Open sarathiscookie opened 6 years ago

sarathiscookie commented 6 years ago

I have a booking availability checking section in my website. On initial load I am getting some current month dates from database. I used setDatesDisabled to disable matching dates. This condition is working fine.

What I am tying to do is, When i click on next month I need to fetch data from database and matching dates need to disable in calendar. I have tried with changeMonth event, But when I change month using event changeMonth calendar is not showing next month with matching dates disabled.

Calendar next month dates comes immediately and back to current month. But json response is getting correctly. 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
                });
            });
philwig commented 6 years ago

I can't understand precisely what you're doing, but #2290 may be relevant

sarathiscookie commented 6 years ago

Thanks for you reply. I will explain what I am trying. When I change month I need to fetch dates from database and show in calendar as disabled dates. I used changeMonth event and setDatesDisabled object. On initial page load it is working fine. But after changing month json response is getting correctly but dates are not disabled in calendar.