JavaScriptでカレンダーから日付を範囲選択!DatePickerが便利

JavaScriptで次のことを実現したい

  • 入力欄の下にカレンダーを表示
  • 日付が選択されたら入力欄に反映
  • 日付を範囲選択とかもしたい

もし自力で実装しようとすると大変すぎます。

でも全て叶えてくれる便利なのを発見しました。

その名も Datepicker.js というライブラリ

このライブラリは本当に便利だったので、
JavaScriptで日付範囲選択の方法を紹介します。

1.初めにdatepicker.jsを読み込みする

ここで紹介するライブラリがこちら

▼ Github : qodesmith / datepicker

MITライセンスなので余計な心配なし

これはjQueryなどに依存しません。
他ライブラリに依存しないで単体で動きます。

▼ ヘッダーでdatepicker.min.cssを読込

▼ フッターでdatepicker.min.jsを読込

もちろんローカルに配置して読込でもOKです。

2.日付範囲選択のinput要素を配置

そしたらinput要素を作成します。

▼ このような感じに配置した

▼ こういう見た目

今回DatePickerの日付範囲選択に用いられるinput要素の例。範囲選択の開始日付として input.fromDate を作り、終了日付には input.toDate を用意した

要素作成するときの注意点はほぼありません。

ここでは範囲選択の開始日付として input.fromDate を作り、終了日付には input.toDate を用意することにしました。

あとはCSSを適用して見栄えを良くしてください。

3.各datepickerをJSコードから初期化

そしたらJSコードから初期化します。

▼ 単純にこういうコードを書くだけ

初期化については驚くほど簡単です。

ポイントとしては datepicker(...)  の第1引数には要素のセレクタ、第2引数のオプションには同一idを指定することですね。

同一idを指定することにより、距離的に離れているデートピッカーが連動してくれます。そして範囲内の日付をDate型として受け取れます(後述)

こういう見た目になりました。

▼ 日付選択カレンダーが表示される

このようなカレンダーが表示され、日付を選択したり範囲選択ができるようになる

配置したinput要素をクリック => 自動で日付カレンダー表示 => 任意の年月日を選べる => input要素に日付が反映 ……そういう感じです。

動かした様子は最後に紹介します。

4.選択範囲内の日付をDate型として取得

ただ選択しただけでは意味がありません。

選択された日付範囲を取得したいです。

▼ それなら次のコードを書けばOK

上記コードのように datepicker.getRabge()  から選択範囲の開始Date(start)と終了Date(end)が取得できます。Date型なので好きなように加工できます。

例えば日付形式でフォーマットしたりですね。

関連 : 日付フォーマットの3つの方法

Date型だからフォーマットとか計算も楽にできます。

初期化時にコールバックも登録可能

ちなみにdatepicker選択時に何かしたい場合、

それなら初期化時にコールバックを登録できます。

▼ モデル的なコード例

色々な機能がついてて本当に便利です。

このdatepickerを動かしてみた様子(gif)

このような見た目と動作になりました。

▼ 選択時のカレンダーの見た目とか

日付を範囲選択した時の様子。この画像のように範囲が薄い青色でマーキングされる

月表示でのカレンダー。日付単位だけではなく、月単位での選択も可能。

▼ 実際に動かしてみた様子がこちら

実際にdatepickerを配置して日付を範囲選択している様子。とても直観的で分かりやすい

以上、datepicker.jsを使ってみたでした。

かなり分かりやすくて直観的です。

どんな場面にも使える良ライブラリだと思う