Bootstrap4 Datepickerで期間を指定して取得するサンプル

# はじめに
bootstrap-datepickerで「いつから」〜「いつまで」の期間を指定して、指定後に開始日付と終了日付を取得するサンプルを作ります。
オプションで日本語化の設定をして、日付の表示フォーマットを`yyyy/mm/dddd`形式に変更します。


![datepicker_bootstrap4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445427/03bb2a21-b1b1-6481-d213-f2237d98f6a5.gif)



<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="saka212" data-slug-hash="xxgWzvg" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="bootstrap-datepicker">
  <span>See the Pen <a href="https://codepen.io/saka212/pen/xxgWzvg">
  bootstrap-datepicker</a> by saka212 (<a href="https://codepen.io/saka212">@saka212</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


# Bootstrapの準備

最初にBootstrapで必要になるCSSとJavaScriptをhtmlに読み込みます。


## CSSの指定

```html:html
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
```
htmlのheadタグ内に記述します。


## JavaScriptの指定

```html:html
  <!-- jQuery, popper.js, Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
```
htmlファイル内のbodyタグ終了の前に記述します。（`</body>`の前に記述）

bootstrap-datepickerを使うために、**jQueryとpopper.jsも必要**になるので、一緒に読み込んでおきましょう。

popper.jsをダウンロードして使う場合は、ブラウザにpopper.jsのURL（[https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js](https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js)）を入力などして、開いた画面で右クリックして、「別名で保存」する方法もあります。

# datepickerの準備

## bootstrap-datepickerの本体を読み込む

```html:html
  <!-- bootstrap-datepicker -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.ja.min.js"></script>
```

Bootstrap用に読み込んだJavaScriptの下に続けて記述します。
日本語化で必要になる`bootstrap-datepicker.ja.min.js`も一緒に読み込みます。

## 日付と期間選択用のhtml
```html:html
<div class="input-daterange input-group" id="datepicker">
  <div class="input-group-prepend">
    <span class="input-group-text">開始日付</span>
  </div>
  <input type="text" class="input-sm form-control" name="from">

  <div class="input-group-append">
    <span class="input-group-text">終了日付</span>
  </div>
  <input type="text" class="input-sm form-control" name="to">
</div>
```

ここでのポイントは、「開始日付」と「終了日付」を囲っているdivタグのclassに`input-daterange`を指定することです。

「開始日付」と「終了日付」の日付を取得する準備として、inputのname属性に`from`と`to`を指定しておきます。


# datepickerを動かす

```javascript:JavaScript
// bootstrap-datepickerの設定
$('.input-daterange').datepicker();
```
bootstrap-datepicker本体の読み込みの後に記述します。
日付と期間選択用のhtmlの作成で指定したclass名（`.input-daterange`）を設定。
以上で、datepickerを使った「開始日付」と「終了日付」の指定が出来るようになります。


## オプション

```javascript:JavaScript
$('.input-daterange').datepicker({
  // オプションを設定
  language:'ja', // 日本語化
  format: 'yyyy/mm/dd', // 日付表示をyyyy/mm/ddにフォーマット
});
```

日本語化と日付表示のフォーマットは、bootstrap-datepickerに用意されているオプションを設定するだけで変更できます。


### 日本語化
オプションで`language:'ja'`を設定。
（あらかじめ`bootstrap-datepicker.ja.min.js`を読み込んでおく必要があります）


### 日付フォーマット変更（yyyy/mm/dd）
オプションで`format: 'yyyy/mm/dd'`を設定。

## 選択した日付を取得
```javascript:JavaScript
$('.input-daterange').datepicker({
  language:'ja',
  format: 'yyyy/mm/dd',
})
.on({
  changeDate: function() {
    // datepickerの日付を取得
    console.log('開始日付 :', $('input[name="from"]').val() );  // 開始日付を取得
    console.log('終了日付 :', $('input[name="to"]').val() );    // 終了日付を取得
  }
});
```
選択した日付を取得するには、`.on()`に続けて上記のように処理を記述すればOKです。
日付と期間選択用のhtml作成時に用意した、name属性のfromとtoを利用して取得します。


# 完成サンプル
```html:完成サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>bootstrap-datepicker</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
  
  <div class="container">
    <div class="row">
      <div class="col-6">
        
        <div class="input-daterange input-group" id="datepicker">
          <div class="input-group-prepend">
            <span class="input-group-text">開始日付</span>
          </div>
          <input type="text" class="input-sm form-control" name="from" />
          <div class="input-group-append">
            <span class="input-group-text">終了日付</span>
          </div>
          <input type="text" class="input-sm form-control" name="to" />
        </div>
        
      </div>
    </div>

  </div>

  <!-- jQuery, popper.js, Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

  <!-- bootstrap-datepicker -->
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.ja.min.js"></script>

    <!-- bootstrap-datepickerの設定 -->
    <script>
      $('.input-daterange').datepicker({
        language:'ja', // 日本語化
        format: 'yyyy/mm/dd', // 日付表示をyyyy/mm/ddにフォーマット
      })
      .on({
        changeDate: function() {
          // datepickerの日付を取得
          console.log('開始日付 :', $('input[name="from"]').val() );  // 開始日付を取得
          console.log('終了日付 :', $('input[name="to"]').val() );    // 終了日付を取得
        }
      });
    </script>

</body>
</html>

```

# 参考
https://bootstrap-datepicker.readthedocs.io/en/latest/events.html

https://uxsolutions.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&maxViewMode=4&todayBtn=false&clearBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox