【BootStrap4】カレンダーを表示する方法

BootStrapではInputボックスにカレンダーを表示する「DatePicker」というコンポーネントがあります。
BootStrapの機能のBootStrap-DatePickerを使用して、カレンダーの入力補助機能を追加する方法を記載致します。

１．ヘッダー部への設定

DatePickerを使用する場合は、使用したいaspxファイルのヘッダータグ内に以下のタグを挿入します。
※BootStrap自体を動作するために別途BootStrapのスタイルシートとjsファイルが必要です。詳しくはこちらを参照ください

//bootstrap-datepickerのスタイルシート
<link rel=”stylesheet” type=”text/css” href=”/bootstrap-datepicker/css/bootstrap-datepicker.min.css”>
//bootstrap-datepickerのJavascript
<script type=”text/javascript” src=”/bootstrap-datepicker/js/bootstrap-datepicker.min.js”></script>
//bootstrap-datepicker 日本語用のJavascript
<script type=”text/javascript” src=”/bootstrap-datepicker/locales/bootstrap-datepicker.ja.min.js”></script>

２．カレンダーを表示したいコントロールの準備

次にカレンダーを使用するコントロールを配置します。
下記では例として、IDが「txtDenDate」のaspxテキストコントロールを配置します。

<div class=”col-md-2 mb-2″>
<label for=”Voucher-Date”>伝票日付</label>
<asp:TextBox runat=”server” type=”text” class=”form-control” ID=”txtDenDate” placeholder=”” value=”” />
<!– bootstrap-datepickerのjavascriptコード –>
<!– 場所は該当テキストの下に入れる –>
<script>
$(‘#ctl00_MainContent_txtDenDate’).datepicker({
format: ‘yyyy/mm/dd’,
language: ‘ja’,
defaultViewDate: Date(),
orientation: ‘bottom’
});
</script>
<div id=”msgVoucherDate” runat=”server” class=”invalid-feedback”>
※ここにエラーメッセージを表示
</div>
</div>

 

TOP