プログラミング

【BootStrap5】カレンダーを表示する方法(tempusdominus v6)

BootStrapフレームワークでカレンダー表示機能を設置するための手順を記載します。(ASP.NET GridView　対応)

概要

BootStrapでカレンダー表示するには以下のコンポーネントを使用します。
この記載方法でClassに「datePicker」を設定した要素でカレンダーが表示できるようになります。

ライブラリーバージョン
bootstrap 55.3.3(latest)
popper.js2.11.6
font awesome6.5.1
tempus-dominus6.9.4

【準備】フレームワークのリンク

CDN（外部サイトを直接参照する）場合

CDN方式でフレームワークを利用する場合は、ヘッダー部に以下のコードを記載します。

スタイルシート

<head>
--------------------                  <中略>                 -----------------------------
<!--      BootStrap5  (latest)    -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css">
<!--      tempus dominus 6.9.4    -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/css/tempus-dominus.min.css">
<!--      font-awesome 6.5.1    -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
    .date-container-days div.dow {
    color: #000 !important;
    font-weight: bold;
    }
        .date-container-days div.dow:first-child {
        color: #f00 !important;
        }
        .date-container-days div.dow:nth-child(7) {
        color: #00f !important;
        }
    .date-container-days div.day.weekend {
    color: #f00;
    }
    .date-container-days div.day:nth-child(7n) {
    color: #00f;
    }
    .date-container-days div.day.old.weekend,
    .date-container-days div.day.new.weekend {
    color: #00000060;
    }
</style>
--------------------                  <中略>                 -----------------------------
</head>

JavaScript

JavaScriptは以下の通りに記載いたします。
※JavaScriptの記載はBodyの一番下に記載してください。上に書くと動作しない場合があります。

<body>
--------------------                  <中略>                 -----------------------------
<script src="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/js/tempus-dominus.min.js"></script>
<script id="rendered-js">
    var elements = document.getElementsByClassName('datePicker');

    for (var i = 0; i < elements.length; i++) {
        var eleName = elements[i].getAttribute("id");

        var element = document.getElementById(eleName);

        const picker = new tempusDominus.TempusDominus(element, {
            localization: {
                format: 'yyyy/MM/dd',
                dayViewHeaderFormat: { year: 'numeric', month: 'long' },
                today: '本日',
                close: '閉じる',
                selectMonth: '月を選択',
                previousMonth: '前月',
                nextMonth: '次月',
                selectYear: '年を選択',
                previousYear: '前年',
                nextYear: '次年',
                selectDecade: '期間を選択',
                previousDecade: '前期間',
                nextDecade: '次期間',
                previousCentury: '前世紀',
                nextCentury: '次世紀'
            },

            display: {
                components: {
                    clock: false
                },

                buttons: {
                    close: true
                }
            }
        });
    }
</script>
</body>

Webページへの設定

カレンダーを表示したいテキストボックスに以下の表記を記載します。

<div runat="server" class="input-group date mb-3 datePicker" id="datetimepicker" data-target-input="nearest">
    <asp:TextBox runat="server" type="text" class="form-control datetimepicker-input" data-target=".datePicker" />
    <div class="input-group-text" data-target=".datePicker" data-toggle="datetimepicker">
        <i class="far fa-calendar-alt"></i>
    </div>
</div>
◇それぞれの要素の意味
1行目　Class "datePicker"カレンダーを定義するために使用しているクラス。
この名前でJavaScriptでカレンダーを展開しているため、カレンダーを表示したいテキストボックスを囲うDiv要素に設定する
２行目 Class "datetimepicker-input"BootStrap5より必要となったもので、カレンダーで入力を行うコントロール（テキストボックス）に設定します。
２行目 data-target ".datepicker"カレンダーを動作させるクラスに紐づける設定です。
３～５行目　全般カレンダーアイコンを表示させて、クリックするとカレンダーが表示されるようにするための要素の組み合わせです。
iタグがアイコンを指定、その外のdivタグでカレンダー動作と紐づけています。

オプション

行追加ボタン等、Updatepanelを使用して画面描画が変更される場合は上記に加えて以下のコードをJavaScriptの「rendered-js」に記載する必要があります。

☆のついている処理を追加することで画面描画後に再度JavaScriptの設定を実行することができるため、カレンダーが表示できる
function pageLoad() {
    // 画面初期化時にイベントをセット★
    SetShowCalc();

    // PageRequestManagerのインスタンスを作成☆
    var manager = Sys.WebForms.PageRequestManager.getInstance();

    // 非同期ポストバック完了後にイベントを再セット☆
    manager.add_endRequest(
        function (sender, args) {
            SetShowCalc();
        }
    );
}
function SetShowCalc() {
    var elements = document.getElementsByClassName('datePicker');

    for (var i = 0; i < elements.length; i++) {
        var eleName = elements[i].getAttribute("id");

        var element = document.getElementById(eleName);

        const picker = new tempusDominus.TempusDominus(element, {
            localization: {
                format: 'yyyy/MM/dd',
                dayViewHeaderFormat: { year: 'numeric', month: 'long' },
                today: '本日',
                close: '閉じる',
                selectMonth: '月を選択',
                previousMonth: '前月',
                nextMonth: '次月',
                selectYear: '年を選択',
                previousYear: '前年',
                nextYear: '次年',
                selectDecade: '期間を選択',
                previousDecade: '前期間',
                nextDecade: '次期間',
                previousCentury: '前世紀',
                nextCentury: '次世紀'
            },

            display: {
                components: {
                    clock: false
                },

                buttons: {
                    close: true
                }
            }
        });
    }
}

 

TOP