Bootstrap4でフォーム入力の際にカレンダーから日付入力する方法

Bootstrap4でフォーム入力の際にカレンダーから日付入力する方法

  • 2019-02-18  最終更新日:2019-02-19

最近はメインでのコーディングはBootstrap4に移行しておりますがいろいろと3の時に使えたものが使えなかったりとしております。 DatetimePickerなどもそうですね。私個人的には4になってからこれだけでほぼほぼ完結できる仕組みになったので使いやすいです。

さて、今回はそんなBootstrap4でのDatetimePickerについてご紹介します。3では以下のような感じが使われていたと思われます。


スポンサーリンク


Bootstrap 4 DateTimePicker

Bootstrap4

使い方を説明します。以下のサイトに使い方は記載されていますが簡単に説明します。

新しいバージョンではなく古いバージョン情報が載ってありますが使い方に関しては問題なさそうです。 トップページに記載されてあるCDNJSは5.0.1が記載されていますが実際は5.1.2が最新です。

まずはhead内に以下のスタイルシートを読み込ませます。ブートストラップ4とライブラリのスタイルシートとFont Awesomeのjsです。現時点での最新版でのでバージョンに関しては適宜確認してください。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/css/tempusdominus-bootstrap-4.min.css" />
<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" crossorigin="anonymous"></script>

それから閉じbody直前に以下を読み込ませます。こちらもブートストラップ関連のjsとmoment.jsとbootstrap4用のDatetimePickerライブラリなどを読み込ませます。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/ja.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.min.js"></script>

これで準備完了です。あとは以下のような感じで設定すれば表示されます。

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <input type="text" class="form-control datetimepicker-input" id="datetimepicker" data-toggle="datetimepicker" data-target="#datetimepicker"/>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/ja.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.min.js"></script>
 <script type="text/javascript">
            $(function () {
                $('#datetimepicker').datetimepicker();
            });
        </script>

基本的にはid="datetimepicker"data-target="#datetimepicker"data-toggle="datetimepicker"の要素だけで表示されるようになっています。アイコンをつけてクリックしたら表示されるというのが以下の感じで表現できるかと思います。

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div class="input-group date" id="datetimepicker" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker"/>
                    <div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/ja.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.min.js"></script>
<script type="text/javascript">
            $(function () {
                $('#datetimepicker').datetimepicker({
                    locale: 'ja'
                });
            });
        </script>

オプションで以下で設定するとヘッダー表記が2019年2月となり選択して値を取得したら2019年2月18日と表示されます。

<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker({
            locale: 'ja',
            dayViewHeaderFormat: 'YYYY年 M月',
            format: 'YYYY年MM月DD日'
        });
    });
</script>

土日は選択できないようにするには以下のオプションを追記

daysOfWeekDisabled: [0, 6]

以下の通りに設定すると本日から30日後までしか選択できないようになります。

minDate: moment().format('L'),
maxDate: moment().add(30, 'days').calendar()

disabledDatesで特定の日を以下の通りに設定することで選択できないようにします。

enabledDatesで特定の日を選択できるようにします。

disabledDates: [
    "2019/4/29","2019/4/30", "2019/5/1", "2019/5/2", "2019/5/3", "2019/5/4", "2019/5/5", "2019/5/6"
],
enabledDates:[
    "2019/6/1","2019/6/2", "2019/6/3"
]

時間のオプションでdisabledHoursで選択できない時間を配列数値にて指定、enabledHoursでも選べる時間を指定することが出来ます。 以下のオプションはどちらも9~18時まで選択できるようにしてあります。

disabledHours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 19, 20, 21, 22, 23],
enabledHours: [ 9,10, 11, 12, 13, 14, 15, 16, 17,18]

日付を複数選択する場合は以下のオプションで可能です。

allowMultidate: true,
multidateSeparator: ','

⇒デモを見てみる

参考になれば幸いです。


∞Tadashi Suyama∞

bootstrap4 calendar input form
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
姫路セントラルパークに行ってきた感想

さて久しぶりになりましたが連休中に姫路市に行って参りました。太陽公園と姫路セントラルパークを2日かけて回りましたが姫路セントラルパークに関しては1日では足りないぐらいかもしれないです。ここは遊園...

12 May 2019

アイキャッチ
これは楽!iterm2パスワードマネージャー機能

さて今回はiterm2のパスワード管理についてです。そもそもこんな機能がついていること自体知らなかったのでこれ使って楽だなと思ったのでご紹介します。 iterm2の現在時点での最新バージョンは...

30 Mar 2019

アイキャッチ
JavaScriptライブラリデータベースのご紹介

さて今回はJSライブラリーのデータベースをご紹介したいと思います。知っている方が多いかと思いますがライブラリやプラグイン、フレームワークなど探す際には役立つサイトではないでしょうか。 どのJS...

28 Mar 2019

アイキャッチ
Web制作者が8年Chrome使ってきた中でおすすめの拡張機能

最近はEdgeもGoogle Chromeと同じChromiumベースでのブラウザとなりほとんどクローム(Chrome)状態ではあります。FirefoxとSafariぐらいでしょうか。Firef...

17 Mar 2019

アイキャッチ
Bootstrap4でフォーム入力の際にカレンダーから日付入力する方法

最近はメインでのコーディングはBootstrap4に移行しておりますがいろいろと3の時に使えたものが使えなかったりとしております。 DatetimePickerなどもそうですね。私個人的には4に...

18 Feb 2019

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

bootstrap4 calendar input form
フッターイメージ