Bootstrapでデータピッカー表示して日付選択する方法&コード例

別に Bootstrap に限った話じゃないんですが、
データーピッカーから日付選択したいことってあると思います。

そんな時に便利だったのが Tempus Dominus Date Time Picker っていうライブラリ

これは独立して動くので、bootstrap 以外でも使えます。

ここではこれを使い、日付選択ピッカーを表示する手順を紹介

1.まず依存関係にあるファイルを読み込もう

データピッカーを表示するには、次が最低限必要

  • jQuery
  • Moment.js
  • Popper.js

この3つに依存してるみたいなので、必ず読み込んでおく必要あり

 

一番楽なのは、CDN経由でインクルードしとくことですね。

例えば次みたいに

 

もし手元にファイルを置いておきたいなら、
それぞれ次URLから直ダウンロードとかもできます。

CDNで読み込むか、直読みするかはお好きなように、、、

まあCDNからインクルードした方が圧倒的に楽だと思います。

必要なら Bootstrap と FontAwesome も読み込んでおこう

タイトルにあるように、
ここでは Bootstrap を使う前提で説明します

なのでもし必要なら、次の2つも読み込んでおいてください。

Bootstrapはなんだかんだ言って便利だし、開発効率をよくするにもオススメ

あと FontAwesome はカレンダーボタンの表示に使います。

2.Date Time Picker 自体を読み込み

そうしたら次にデータピッカー本体を読み込みます。

これもCDN経由が使えるので、そっちを使っとけばOK

▲こういう風に読み込んどく

 

ちなみに次のGitHubページから直DLも可能です。

まあいちいち配置するのが面倒なので、CDNから読み込んだ方が楽なはず

3. 日付選択データピッカーの表示方法(例)

ここまでずっとライブラリの読み込みばっかでした。

こっからは実際にデータピッカーを表示するコード例です。

 

ではまず、次みたいな データピッカー用タグ を定義(Bootstrap使用)

このタグ内では、抑えとくべきポイントがいくつかあります。

それを箇条書きするなら次の通り

  • 全体を囲むタグに次の2つを設定
    1.id ⇒ 他と被らない分かりやすい名前をつける、
    2.data-target-input ⇒ とりあえず nearest  にすればOK
  • inputには次の2つを設定
    1.class ⇒ 必ず datetimepicker-input  を含める
    2.data-target ⇒ 親要素に割り振ったIDを #  付きで入れる
  • inputの下の要素には次を設定
    1.data-target ⇒ 親要素に割り振ったID を #  つきで入れる
    2.data-toggle ⇒ ここには datetimepicker  と設定

1つでも間違えると動かないので要注意!

 

そうしたら最後に、適当な場所で次のスクリプトを実行

データピッカーの ID は各自のモノに置き換えてください。

 

これで次みたいな日付選択ピッカーが表示されるようになったはず

▼データピッカーの例

Bootstrapで表示したデータピッカーの例。直感的に日付選択ができて便利

 

あと動作例が次のGIF動画

Boostrapで表示したデータピッカーの動作例

カレンダーから日付を選択すると、
上のテキスト欄にその内容が反映されます。

これで利便性を損なうことなく日付を選択してもらえます。

こういう便利なライブラリを作ってくれた開発者さんに感謝です!

ここまでのまとめ

以上、Bootstrapでデータピッカーを表示する手順でした。

ちなみにライブラリ自体は Bootstrap に依存してません。

どんな環境でも使えるのも、このライブラリの便利なとこです。

CSS

Commentsこの記事についたコメント

コメントを残す

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください