flatpickr使ってみた

import { Ng2FlatpickrModule } from 'ng2-flatpickr';

"styles": [ "../node_modules/flatpickr/dist/flatpickr.min.css" ]

<ng2-flatpickr #flatpickr [config]="flatpickrOptions"> </ng2-flatpickr>

[config]="flatpickrOptions"

import { Component, ViewChild } from '@angular/core';

import * as moment from 'moment';
import Russian from 'flatpickr/dist/l10n/ja.js';
import { Ng2FlatpickrComponent } from 'ng2-flatpickr';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.scss']
})
export class CalendarComponent {

  flatpickrOptions = {
    locale: Russian.ja,// ロケール指定
    enableTime: true,時刻を指定可能にする
    enableSeconds: true, 秒数を指定可能にする
    allowInput: true,日付を直接入力可能にします。初期値は直接入力不可です。
    time_24hr: true,　時刻選択を24時間表記で選択するか
    onChange: function(selectedDates, dateStr, instance) {
     // 日時を変更したとき
 },
  };

  // カレンダーコンポーネント
  @ViewChild('flatpickr') flatpickr: Ng2FlatpickrComponent;

  // flatpickrに日時をセットする(inputに直接値をセットする)
  setDate() {
   this.flatpickr.flatpickrElement.nativeElement._flatpickr.setDate(moment().format('YYYY/MM/DD HH:mm'), true);
  }

}