Uncaught TypeError: Cannot read property 'add' of undefined

[deangibson89]

When trying to initialise Flatpickr I get the following error:

flatpickr.js:1176 Uncaught TypeError: Cannot read property 'add' of undefined at setupInputs (flatpickr.js:1176) at init (flatpickr.js:21) at Flatpickr (flatpickr.js:1399)

Expected Behavior

Flatpickr should initialise and I should be able to click inside the input field to active Flatpickr.

Current Behavior

Getting the error mentioned above.

Steps to Reproduce (for bugs)

Create an input: <input class="flatpickr" type="text" placeholder="Select Date.."> Call Flatpickr in input's class: flatpickr(".flatpickr");

Your Environment

• Version used: 2.3.4
• Browser Name and version: Google Chrome Version 55.0.2883.87 (64-bit)
• Operating System and version (desktop or mobile): Linux Mint 18 Sarah (64-bit)

[chmln]

Hello,

Looks like you're using new Flatpickr(..) and providing a string instead of the element's node.

Create an input: Call Flatpickr in input's class: flatpickr(".flatpickr");

I'm unable to reproduce. Please provide a fiddle :+1:

[edouard-lopez]

@chmln could you provide a working example of what you mean as the docs is confusing and the following doesn't work:

const Flatpickr = require("flatpickr");
new Flatpickr(document.querySelector('#start-date'), {});

related #350

[edouard-lopez]

In angular-1.5 with webpack-2.2 I git it to work by moving the instanciation into the component initialization:

HTML

<input type="text" id="start-date" ng-model="vm.startDate" ng-change="vm.updateEndDate()"></input>

Component

require('flatpickr');
angular.module('app').component('rangeDatepicker', {
        template: require('./range-datepicker.html'),
        controller: controller,
        controllerAs: 'vm',
    });

function controller(businessDays, moment) {
    var vm = this;
    activate();
    function activate() {
        document.getElementById('start-date').flatpickr({ inline: true });
    }