Datepicker for BootstrapをCDNを指定して設定

HTML5ではinput type=date がサポートされていますが、ブラウザによって対応がことなっていたり、スマホからは使いにくいです。Twitter社が開発したCSSフレームワークのBootstrapを利用しているときには、「Datepicker for Bootstrap」を使うのが便利です。

利用バージョン

Bootstrap 3.3.7 (http://getbootstrap.com/)
jQuery 2.2.4 (https://jquery.com/)
Datepicker for Bootstrap v1.6.1 (https://github.com/eternicode/bootstrap-datepicker)

現在、Bootstrapの最新版が4ですが、安定性を重視して3にしました。

Bootstrap3.3.7はjQuery ver3もサポートしますが、Datepickerが動かないかったのでjQuery 2.2.4にしました。

CDNサービスからライブラリを読み込む

CDNを利用すれば自分のサーバーにライブラリを置かなくてもいいメリットがあります（CDNがトラブった時はデメリットですが）。

また、インターネットに接続できる環境でローカルのHTMLを開いても動作するメリットがあります（逆に、インターネットに接続できない環境では、ローカルにサーバー環境を構築してても動作しないデメリットがあります・・・）。

最初にBootstrapのみのテンプレート

http://getbootstrap.com/getting-started/#template

getbootstrap.com

BootstrapのBasicTemplateを参考に書き換えました。古いブラウザは無視！

作成したファイルはコチラ　https://memordm.com/tes/boot1.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap テンプレート</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <h1>こんにちは、世界！</h1>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

Datepicker for Bootstrapを追加

参考　http://eternicode.github.io/bootstrap-datepicker/

作成したファイルはコチラ　https://memordm.com/tes/boot2.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap テンプレート</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Datepicker for Bootstrap -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css">

  </head>
  <body>
    <div class="container">
      <h1>こんにちは、Datepicker！</h1>
      <div class="form-group">
        <label for="day1">日付</label>
        <input type="text" class="form-control datepicker1" name="day1" id="day1" placeholder="日付" >
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Datepicker for Bootstrap -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/locales/bootstrap-datepicker.ja.min.js"></script>

    <script>
      $('.datepicker1').datepicker({
      format: "yyyy/mm/dd",
      language: "ja",
      autoclose: true, //日付選択で自動的にカレンダーを閉じる
      orientation:'bottom left'
      });
    </script>
  </body>
</html>

年月のみの指定も可能です。

作成したファイルはコチラ　https://memordm.com/tes/boot3.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Datepicker for Bootstrap</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Datepicker for Bootstrap -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css">

  </head>
  <body>
    <div class="container">
      <h1>こんにちは、Datepicker！</h1>
      <div class="form-group">
        <label for="day1">日付</label>
        <input type="text" class="form-control datepicker1" name="day1" id="day1" placeholder="日付" >
      </div>

      <div class="form-group">
        <label for="day2">年月</label>
        <input type="text" class="form-control datepicker2" name="day2" id="day2" placeholder="年月" >
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Datepicker for Bootstrap -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/locales/bootstrap-datepicker.ja.min.js"></script>

    <script>
      $('.datepicker1').datepicker({
      format: "yyyy/mm/dd",
      language: "ja",
      autoclose: true, //日付選択で自動的にカレンダーを閉じる
      orientation:'bottom left'
      });
    </script>

    <script>
      $('.datepicker2').datepicker({
      format: "yyyy/mm",
      language: "ja",
      autoclose: true, //日付選択で自動的にカレンダーを閉じる
      minViewMode: 'months',
      orientation:'bottom left'
      });
    </script>


  </body>
</html>

ライブラリを利用することでシンプルなコードで作れます。