如何在 Angular/TypeScript 中使用 flatpickr rangePlugin

Question

我想在我的 Angular 项目中使用带有 rangePlugin 的 flatpickr，但是在 TypeScript 中导入插件后我无法实例化 rangePlugin。

TypeScript 错误： Only a void function can be called with the 'new' keyword.ts(2350)

我导入插件的方式是：

import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';
import flatpickr from 'flatpickr';

我尝试这样使用插件：

const range = new rangePlugin({ input: '#datepicker2' }));

产生上述错误。

如何正确导入 rangePlugin？

Answer 1

尝试

declare const flatpickr: any;

而不是

 import flatpickr from 'flatpickr';

或

找那个。

https://flatpickr.js.org/getting-started/#usage

Answer 2

错误不言而喻。从函数中删除 'new'。

plugins: [rangePlugin({ input: myInput })]

您还需要声明要传递给 rangePlugin 函数的元素。

const myInput = document.getElementById('datepicker2') as HTMLInputElement;

Answer 3

// First do the imports
import flatpickr from 'flatpickr';
import rangePlugin from 'flatpickr/dist/plugins/rangePlugin';

// Then you can use the flatpickr anyway you want inside ngOnInit, as plain javascript
ngOnInit(): void {
    flatpickr("#enterYourIdHere", {
        plugins: [
            rangePlugin({
                //Enter your options here
            })
        ]
    });
}

如何在 Angular/TypeScript 中使用 flatpickr rangePlugin

How to use flatpickr rangePlugin in Angular/TypeScript

typescript

flatpickr

angular