Bootstrap - Datepicker/Disable specific dates from array

I have a array with dates. I want to loop this array and disable selectable dates in datepicker control. I need to do this in beforeShowDay parameter!

This is my code:

var datesForDisable = ["25-01-2017", "26-01-2017", "27-01-2017"]

$("#holidayDateFrom").datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            weekStart: 1,
            calendarWeeks: true,
            todayHighlight: true,
            //datesDisabled: datesForDisable,
            //daysOfWeekDisabled: [0, 6],

            beforeShowDay: function (currentDate) {
                var dayNr = currentDate.getDay();

                if (dayNr == 6) {//This works
                    return false;
                }

                if (dayNr == 0) {//This works
                    return false;
                }



                     // This dosnt works..
                        var dateNr = moment(currentDate.getDate()).format("DD-MM-YYYY");
                        if (datesForDisable.length > 0) {
                            for (var i = 0; i < datesForDisable.length; i++) {
                                var date = new Date(datesForDisable[i]);
                                if (date == dateNr) {
                                    return false;
                               }
                            }
                        }
                        return true;
                    }
                })

How to do this? Thank you previously!

Upvotes: 0

Views: 12947

Answers (2)

Frahim
Frahim

Reputation: 379

datesDisabled: datesForDisable

I am not sure why you comment this option. As per your question, This option is providing the same thing you are look for. Take a look:

http://jsfiddle.net/CxNNh/4056/

Its worked perfect for me

var datesForDisable = ["03-04-2019", "03-09-2019", "03-15-2019"];

   $(document).ready(function () {
        $('.datepicker').datepicker({

            multidate: true,
            format: 'mm-dd-yyyy',
            todayHighlight: false,
            datesDisabled: datesForDisable,
            multidateSeparator: ',  ',
            templates : {
                leftArrow: '<i class="fi-arrow-left"></i>',
                rightArrow: '<i class="fi-arrow-right"></i>'
            }
        });
    });

Upvotes: 3

Vladu Ionut
Vladu Ionut

Reputation: 8193

You can compare the dates as timestamp(unix time)

var datesForDisable = ["25.01.2017", "26.01.2017", "27.01.2017"]

$("#datepicker").datepicker({
            format: 'dd/mm/yyyy',
            autoclose: true,
            weekStart: 1,
            calendarWeeks: true,
            todayHighlight: true,
            //datesDisabled: datesForDisable,
            //daysOfWeekDisabled: [0, 6],

            beforeShowDay: function (currentDate) {
                var dayNr = currentDate.getDay();
                var dateNr = moment(currentDate.getDate()).format("DD-MM-YYYY");

                if (dayNr == 6) {//This works
                    return false;
                }

                if (dayNr == 0) {//This works
                    return false;
                }
                    if (datesForDisable.length > 0) {
                        for (var i = 0; i < datesForDisable.length; i++) {                        
                            if (moment(currentDate).unix()==moment(datesForDisable[i],'DD.MM.YYYY').unix()){
                                return false;
                           }
                        }
                    }
                    return true;
                }
            })

Upvotes: 2

Related Questions