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

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

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

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

Bootstrap 3 Datepicker

Bootstrap 4 DateTimePicker

Bootstrap4

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

Tempus Dominus - Bootstrap 4

新しいバージョンではなく古いバージョン情報が載ってありますが使い方に関しては問題なさそうです。トップページに記載されてある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: ','

⇒デモを見てみる

参考になれば幸いです。

Bootstrap 4フロントエンド開発の教科書

posted with ヨメレバ

宮本麻矢/朝平文彦技術評論社 2018年08月26日

楽天ブックスで購入

Amazonで購入

∞Tadashi Suyama∞

bootstrap4 calendar input form