Bootstrap Datepicker
導入方法は、 プラグインをこのサイトからダウンロードしてください。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>
一番よく使われると思われる例です。インプットボックス横にカレンダーアイコンを表示させ、言語を日本語に変換、データ入力形式を「年月日」にした例です。
<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>
<script> $(function(){ //Default $('#datepicker-default .date').datepicker({ format: "yyyy年mm月dd日", language: 'ja', autoclose: true }); }); </script>
日付のFrom-Toの選択ができる例です。予約開始日と終了日を設定できます。宿泊予約システムなど、期間を設定する場合のサービスに役立ちます。
<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>
<script> $(function(){ $('#datepicker-daterange .input-daterange').datepicker({ language: 'ja', format: "yyyy年mm月dd日", autoclose: true }); }); </script>
カレンダーの”日”ではなく”月”や”年”の選択から開始可能になります。たとえば「1 / year」にすると、月選択の状態でカレンダー画面が起動します。
<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>
<script> $(function(){ $('#datepicker-startview .date').datepicker({ startView: 1, language: "ja", autoclose: true }); }); </script>
画面にインラインでカレンダーを表示させることもできます。カレンダーの下にインプットボックスを設置すれば、選択した日付がinputに代入されます。
<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>
<script> $(function(){ $('#datepicker-inline .in-line').datepicker({ format: "yyyy年mm月dd日", language: "ja", autoclose: true }); $('.in-line').on('changeDate', function() { $('#my_hidden_input').val( $('.in-line').datepicker('getFormattedDate') ); }); }); </script>