Bootstrap Datepicker

ライトプラン 詳細はこちら


Setting

導入方法は、 プラグインをこのサイトからダウンロードしてください。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',
        autoclose: true
    });
    
});
</script>

Range

日付のFrom-Toの選択ができる例です。予約開始日と終了日を設定できます。宿泊予約システムなど、期間を設定する場合のサービスに役立ちます。

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日",
        autoclose: true
    });
});
</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",
        autoclose: true
    });
});
</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",
        autoclose: true
    });
    $('.in-line').on('changeDate', function() {
        $('#my_hidden_input').val(
            $('.in-line').datepicker('getFormattedDate')
        );
    });
});
</script>