Angularで直感的に日付や時間を選択するDateTimePickerを使ってみる

Angularで日付や時間を直感的に選択できるDateTimePickerがないかなーと探してみました。
今回、ng2-flatpickrを採用することにしたので、その使い方を簡単に紹介します。

比較対象と採用理由

Google先生に良さげなライブラリがないか聞いてみて、一通り物色し下記3つを候補に挙げました。
今回、メンテナンスされていないようなライブラリは除外しています。

  • @angular-mdl/datepicker

https://github.com/mseemann/angular2-mdl-ext

  • angular-bootstrap-datetimepicker

https://github.com/dalelotts/angular-bootstrap-datetimepicker

  • ng2-flatpickr

https://github.com/mezoistvan/ng2-flatpickr

結果的にng2-flatpickrにしましたが、その理由は日付と時間を同時に選択できるデザインの修正が不要設定しやすく簡単の3点でした。

ng2-flatpickrの導入する

まずはインストールをしましょう。


$ npm i --save flatpickr ng2-flatpickr

モジュールを読み込む

app.module.tsでNg2FlatpickrModuleを読み込みます。


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { Ng2FlatpickrModule } from 'ng2-flatpickr';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    Ng2FlatpickrModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

スタイルシートを読み込む

次にangular.jsonを開き、cssファイルを読み込むようにします。


:
"styles": [
  "src/styles.css",
  "./node_modules/flatpickr/dist/flatpickr.min.css",
  "./node_modules/flatpickr/dist/themes/material_blue.css"
],
:

material_blue.cssはカレンダーのテーマです。全部で6種類あり読み込むcssを変更することでテーマを変えることができます。

f:id:maroemon58:20180610103802p:plain

DatePickerを使用する

これで使用できる環境が整いました。まずはデフォルトの状態で動かしてみましょう。

htmlファイルにng2-flatpickrタグを追加します。


<ng2-flatpickr></ng2-flatpickr>

これだけで完了です。試してみましょう。

f:id:maroemon58:20180610102117g:plain

大丈夫そうですね。

オプションを設定する

時間も選択できるようにしたいので、オプションを設定します。
はじめに利用するcomponentで下記2つを読み込みます。


import { FlatpickrOptions } from 'ng2-flatpickr';
import Japanese from 'flatpickr/dist/l10n/ja.js';

オプションを設定します。


options: FlatpickrOptions = {
  locale: Japanese,      // ロケールを日本
  enableTime: true,      // 時刻選択を有効
  time_24hr: true,       // 24時間表記を有効
  minDate: '2018-06-10', // 最小選択日時
};

componentで設定したオプションをhtml側に反映します。


<ng2-flatpickr [config]="options"></ng2-flatpickr>

確認してみます。

f:id:maroemon58:20180610101959g:plain

問題なく動作してますね。

その他の設定項目はこちらをご覧ください。

https://flatpickr.js.org/options/

まとめ

デザインにこだわらなければ必要十分ではないでしょうか?使い方が簡単ですので、手軽にDateTimePickerを利用したいときに重宝しますね。ではまた。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

Yusuke Ito

20代後半プログラミング未経験から転職し、現在はWEBエンジニアとして働いています。 バックエンドが本職ですが、1人でサービスを立ち上げるためフロントエンドも勉強中です。 最近はDAppsやNEMの開発に夢中です。