プログラミング

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

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

概要

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

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

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

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

スタイルシート

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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の一番下に記載してください。上に書くと動作しない場合があります。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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ページへの設定

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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の設定を実行することができるため、カレンダーが表示できる
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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
}
}
});
}
}
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 } } }); } }
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