使用 angularx-flatpickr 在 Angular 上加载语言环境时出错

Question

在 angular 组件的指令中添加了语言环境：

<input
type="text"
name="date"
mwlFlatpickr
[altInputClass]="'form-control'"
[(ngModel)]="post.date"
[altInput]="true"
[inline]="true"
[dateFormat]="'d.m.y'"
[locale]="'Portuguese'"
[defaultValue]="'today'"
[convertModelValue]="true">

尝试加载语言环境时，返回错误：

Error: flatpickr: invalid locale Portuguese

at setupLocale (flatpickr.js:1910) at init (flatpickr.js:581) at FlatpickrInstance (flatpickr.js:2419) at _flatpickr (flatpickr.js:2438) at flatpickr (flatpickr.js:2463) at FlatpickrDirective.push../node_modules/angularx-flatpickr/fesm5/angularx-flatpickr.js.FlatpickrDirective.ngAfterViewInit (angularx-flatpickr.js:295) at callProviderLifecycles (core.js:22416) at callElementProvidersLifecycles (core.js:22390) at callLifecycleHooksChildrenFirst (core.js:22380) at checkAndUpdateView (core.js:23316)

Answer 1

在您的 module.ts 文件中，导入所有必要的文件，创建一个名为 flatpickrFactory 的函数，并导入与您的语言相对应的语言 (All languages files are here)

import { FlatpickrModule, FLATPICKR } from 'angularx-flatpickr';
import flatpickr from 'flatpickr';
import { Portuguese } from 'flatpickr/dist/l10n/pt';

export function flatpickrFactory() {
  flatpickr.localize(Portuguese);
  return flatpickr;
}

现在，在您的 component.ts 上将 flatpickrFactory(); 导入您的 ngOnInit() 方法。

ngOnInit() {
  flatpickrFactory();

  // Your other logic here...
}

然后在您的 component.html (templateUrl) 中添加指令，例如：

<input 
  type="text" 
  mwlFlatpickr 
  [(ngModel)]="selectedDate" 
  [altInput]="true" 
  [dateFormat]="'d.m.y'"
  [locale]="'Portuguese'"
  [convertModelValue]="true">

使用 angularx-flatpickr 在 Angular 上加载语言环境时出错

Error when loading locale on Angular using angularx-flatpickr

locale

flatpickr

angular