flatpickr使ってみた
目次
flatpickrとは
javascriptで作られたdate-picker ライブラリです。
ドキュメント：https://flatpickr.js.org/
ダウンロード：https://www.npmjs.com/package/ng2-flatpickr
日本語ドキュメント：https://tr.you84815.space/flatpickr/index.html
インストール
install
$ npm install –save flatpickr ng2-flatpickr
import
import { Ng2FlatpickrModule } from 'ng2-flatpickr';
style
"styles": [ "../node_modules/flatpickr/dist/flatpickr.min.css" ]
使い方
HTML
<ng2-flatpickr #flatpickr [config]="flatpickrOptions"> </ng2-flatpickr>
idを指定
[config]="flatpickrOptions"
TypeScript側でflatpickrOptionsにオプションを定義。
TypeScript
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);
}
}
tips
API
- changeMonth(monthNum, is_offset=true)
月を指定した分だけ移動する
is_offsetをfalseにすると指定した月に移動する - clear()
リセットする - close()
カレンダーを閉じる - destroy()
flatpickrインスタンスを削除 - formatDate(formatStr, dateObj)
- jumpToDate(date)
指定した日時に移動 - open()
カレンダーを開く - parseDate(date)
指定した文字列をDateオブジェクトにする - setDate(date, triggerChange, dateStrFormat)
日付を指定したdateに変更します。
triggerChangeにtrueを指定することで、onChangeを発火させることができます。
event
- onChange
日時を変更したとき
function(dates, datestring, Flatpickr){} - onOpen
カレンダーが開いたとき
function(dates, datestring, Flatpickr){} - onClose
カレンダーが閉じたとき
function(dates, datestring, Flatpickr){} - onReady
カレンダーが選択可能になったとき
function(dates, datestring, Flatpickr){} - onDayCreate
カレンダーの日付セルが生成されたとき
function(dates, datestring, Flatpickr, spanElem){}
使ってみた感想
単純な機能しか使っていませんが、日本語の解説サイトなどが豊富で大変助かりました。
参考にしたサイト：https://goo.gl/gmdrkV