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

Shareこの記事をシェアしよう!

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

2件のコメント
  • YM

    「データピッカー」「データーピッカー」と表記されてますが、
    「date」は「データ」とも「データー」とも読まないですよね。
    「デートピッカー」がカタカナで書くには正しい表記かと思いますよ。

    1月 16, 2020 2:43 pm
    • ぴー助

      コメントありがとうございます。
      正しくご指摘の通り、その呼び方が正しかったです。

      ただ不思議なのが「bootstrap デートピッカー」を検索すると「もしかして: bootstrap データピッカー」など表示されることですね。正式名称を誤解されてる方は多いのかもしれません。この記事も間違った名称を広めてしまう恐れがあるので修正しました。重ねてご指摘ありがとうございます。

      1月 16, 2020 3:30 pm

コメントを残す

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

CAPTCHA


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