Datepicker won't run

[psychoslave]

Hi,

I'm running a Rails 5.1.6 application and tried to install datepicker, but I failed to make it work.

I did changed the Gemfile as required, and updated app/assets/stylesheets/application.scss (not the css one which we don't use) and app/assets/javascripts/application.js as documented. When I add an input, it just stay as if nothing would happen to them.

The application seems well installed, and putting a debugger before calling $('.input-group.date').datepicker enable to see that the following function is called:

// Picker object

    var Datepicker = function(element, options){
        $.data(element, 'datepicker', this);
        this._process_options(options);

        this.dates = new DateArray();
        this.viewDate = this.o.defaultViewDate;
        this.focusDate = null;

        this.element = $(element);
        this.isInput = this.element.is('input');
        this.inputField = this.isInput ? this.element : this.element.find('input');
        this.component = this.element.hasClass('date') ? this.element.find('.add-on, .input-group-addon, .btn') : false;
        if (this.component && this.component.length === 0)
            this.component = false;
        this.isInline = !this.component && this.element.is('div');

        this.picker = $(DPGlobal.template);

        // Checking templates and inserting
        if (this._check_template(this.o.templates.leftArrow)) {
            this.picker.find('.prev').html(this.o.templates.leftArrow);
        }

        if (this._check_template(this.o.templates.rightArrow)) {
            this.picker.find('.next').html(this.o.templates.rightArrow);
        }

        this._buildEvents();
        this._attachEvents();

        if (this.isInline){
            this.picker.addClass('datepicker-inline').appendTo(this.element);
        }
        else {
            this.picker.addClass('datepicker-dropdown dropdown-menu');
        }

        if (this.o.rtl){
            this.picker.addClass('datepicker-rtl');
        }

        if (this.o.calendarWeeks) {
            this.picker.find('.datepicker-days .datepicker-switch, thead .datepicker-title, tfoot .today, tfoot .clear')
                .attr('colspan', function(i, val){
                    return Number(val) + 1;
                });
        }

        this._process_options({
            startDate: this._o.startDate,
            endDate: this._o.endDate,
            daysOfWeekDisabled: this.o.daysOfWeekDisabled,
            daysOfWeekHighlighted: this.o.daysOfWeekHighlighted,
            datesDisabled: this.o.datesDisabled
        });

        this._allow_update = false;
        this.setViewMode(this.o.startView);
        this._allow_update = true;

        this.fillDow();
        this.fillMonths();

        this.update();

        if (this.isInline){
            this.show();
        }
    };

I don't have much idea to debug it further though. Neither rails nor browser console don't throw any error.

Let me know if I can provide any further relevant information.

[Nerian]

Hi,

Can you show me how you are creating the input?

[psychoslave]

I tried this two in my erb:

<input type="text" data-provide='datepicker' >
<div class="input-group date">
    <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

and in the js:

    $('.input-group.date').datepicker({
        startDate: "11/6/2018",
        endDate: "11/12/2018",
        maxViewMode: 1,
        language: "fr",
        autoclose: true,
        datesDisabled: ['06/06/2018', '06/21/2018']
    });

No js for the first, as from my understanding it should work automatically with the `data-provide='datepicker'``.

[Nerian]

Hi!

Sorry for the wait :) Did you figure out what was wrong? I would think the datepicker() needs to be called on the input.

[oldwolf]

Hi @psychoslave , my datepicker doesn't work either

But I found the issue was due to using a custom theme, and the theme overrides the dropdown-menu and somoe other styles, hence the widget didn't show up, hope that give you a direction to find out the bug.