Bootstrap datepicker datesdisabled not working when giving array via ajax

Question

I am getting dates via ajax. And I want to disable those dates on my datepicker. But the parameter datesDisabled is not working in my code at all. It always shows the datepicker without disable any date. Below is my jquery code:

$(document).ready(function() {

    $("#people").blur(function() {
                var people = $("#people").val();
                if(people == "" || people == 0)
                    {
                        $("#people-error").html("Please enter number of people.");
                        return false;
                    }
                var experience_uid = $("#experience_uid").val();
                var req_url = "' . site_url() . '/wp-content/plugins/visitnorth/visitnorth.php";
                var ajax_req_for_schedule = 1;



               $.ajax({
                    async:false,
                    "type": "POST",
                    "url": req_url,
                    "data": {"people":people, "experience_uid":experience_uid, "ajax_req_for_schedule":ajax_req_for_schedule},
                    statusCode: {
                        404: function() {
                            alert("Oj, någonting gick fel. Försök igen.");
                        },
                        500: function() {
                            alert("Oops! An Internal Error has occurred.");
                        },
                    },
                    success: function (data) {
                       //output data is: ["11-08-2017, 11-05-2017, 11-03-2017"]
                       $(".datepicker").datepicker({
                            todayHighlight: true,
                            datesDisabled: data
                        });

                    }
                });

               });

            });

Gagan Bansal · Accepted Answer · 2017-11-09 06:17:20Z

1

To disable some specific dates, you can override the method (beforeShowDay) will be called for each date and you can return the css class:

beforeShowDay: function (date){

                    if (date<minDate || date > maxDate) {
                        return 'invalid_date_datepicker';
                }
            }`

In above example, invalid_date_datepicker is a css class, which grey outs the area.

and if you also want those grey out dates not be select , you can also override the onSelect and restrict it to select for those dates where this class has been applied.

answered Nov 9, 2017 at 6:17

Gagan Bansal

3233 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2226181 Over a year ago

I dont have any minDate or maxDate. The dates are coming from ajax dynamically.

Gagan Bansal Over a year ago

You can re-configure the datepicker in success of that ajax result and can use the ajax response disable dates in beforeShowDay. You can check if disableDates.indexOf(date) >0 then disable the date otherwise not.

Gagan Bansal Over a year ago

In case the answer helped you, could you please upvote it :).

Collectives™ on Stack Overflow

Bootstrap datepicker datesdisabled not working when giving array via ajax

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related