Bootstrap DatepickerはBootstrapのフレームワークを利用した、日付入力補助プラグインです。 ユーザーがカレンダーから直感的に日付を選ぶことができる、 日付を入力する際のUIとして便利なプラグインです。 今回はよく使われるサンプルとその説明を用意しました。
目次
サンプルデモページ
サンプルページを作成しました。
ブログ記事内だと、表示が崩れるので、サンプルページで動作の確認をしてください。
セッティング方法
導入方法は、 プラグインをこのサイトからダウンロードしてください。https://github.com/uxsolutions/bootstrap-datepicker
プラグインのオプション設定方法は、このページで確認できます。オンラインデモ
セッティング方法は、簡単。jquery、bootstrap、font-awesome、Bootstrap Datepickerのプラグインを読み込ませましょう。日本語化する場合は、bootstrap-datepicker.ja.min.jsを直接読み込ませます。
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript" language="javascript"></script> <script src="../common/js/bootstrap.js"></script> <link rel="stylesheet" href="../common/css/bootstrap.css"> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="bootstrap-datepicker/css/bootstrap-datepicker.min.css"> <script type="text/javascript" src="bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script> <script type="text/javascript" src="bootstrap-datepicker/locales/bootstrap-datepicker.ja.min.js"></script>
Default
一番よく使われると思われる例です。インプットボックス横にカレンダーアイコンを表示させ、言語を日本語に変換、データ入力形式を「年月日」にした例です。
HTML
<div class="form-group" id="datepicker-default"> <label class="col-sm-3 control-label">Default</label> <div class="col-sm-9 form-inline"> <div class="input-group date"> <input type="text" class="form-control" value="20170621"> <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div> </div> </div> </div>
JS
<script> $(function(){ //Default $('#datepicker-default .date').datepicker({ format: "yyyy年mm月dd日", language: 'ja' }); }); </script>
Range
日付のFrom-Toの選択ができる例です。予約開始日と終了日を設定できます。宿泊予約システムなど、期間を設定する場合のサービスに役立ちます。
HTML
<div class="form-group" id="datepicker-daterange"> <label class="col-sm-3 control-label">Range</label> <div class="col-sm-9 form-inline"> <div class="input-daterange input-group" id="datepicker"> <input type="text" class="input-sm form-control" name="start" /> <span class="input-group-addon">to</span> <input type="text" class="input-sm form-control" name="end" /> </div> </div> </div>
JS
<script> $(function(){ $('#datepicker-daterange .input-daterange').datepicker({ language: 'ja', format: "yyyy年mm月dd日" }); }); </script>
Start View
カレンダーの”日”ではなく”月”や”年”の選択から開始可能になります。たとえば「1 / year」にすると、月選択の状態でカレンダー画面が起動します。
HTML
<div class="form-group" id="datepicker-startview"> <label class="col-sm-3 control-label">Start view</label> <div class="col-sm-9 form-inline"> <div class="input-group date"> <input type="text" class="form-control"> <span class="input-group-addon"> <i class="glyphicon glyphicon-th"></i> </span> </div> </div> </div>
JS
<script> $(function(){ $('#datepicker-startview .date').datepicker({ startView: 1, language: "ja" }); }); </script>
Embedded / inline
画面にインラインでカレンダーを表示させることもできます。カレンダーの下にインプットボックスを設置すれば、選択した日付がinputに代入されます。
HTML
<div class="form-group" id="datepicker-inline"> <label class="col-sm-3 control-label">Embedded / inline</label> <div class="col-sm-9 form-inline"> <div class="in-line" data-date="2010年10月26日"></div> <input type="text" id="my_hidden_input"> </div> </div>
JS
<script> $(function(){ $('#datepicker-inline .in-line').datepicker({ format: "yyyy年mm月dd日", language: "ja" }); $('.in-line').on('changeDate', function() { $('#my_hidden_input').val( $('.in-line').datepicker('getFormattedDate') ); }); }); </script>
“簡単!カレンダーから日付入力 Bootstrap Datepicker の使い方と解説” への1件のフィードバック
コメントは停止中です。