Can't init bootstrap-datepicker

Question

I can't get bootstrap-datepicker (https://github.com/uxsolutions/bootstrap-datepicker) to initialize the proper way or call any methods or events on it.

I'm using Laravel 5.4.7 / Vue 2.3.3 / jQuery 3.1.0

My html look like this:

<input type="text" data-provide="datepicker" />

But when I try to initialize the datepicker using the "official" way it doesn't set any of the properties (no errors either):

    $('.datepicker').datepicker({
        todayHighlight: true
    });

It doesn't matter where I place the code (beginning, end, vue created-method, vue mounted-method, $nextTick).

However setting the values like this works:

$.fn.datepicker.defaults.todayHighlight = true;

Unfortunately since non of the other methods or events seem to work either just using the $.fn.datepicker.defaults is not enough.

Does anyone have a clue on what might be wrong?

Answer 1

Change your input field code to this:

<input type="text" data-provider="datepicker" class="datepicker" />

The issue was of CSS selector i.e. you were searching for an element with datepicker class but their was no such element.

So just add the class attribute to it.