datepickerをbootstrapで

投稿日 投稿者 esadao
bootstrap-datepicker

datepickerを使っていたが、本家からダウンロードできなくなっている
https://jqueryui.com/datepicker/
またjquery3.3.1との相性も悪い

対応として bootstrap-datepicker を使う事にした
手順
１．jqueryiからjquery-3.4.1.slim.min.jsをダウンロード
２．bootstrapのダウンロード（別ブログbootstrap導入を参照）
３． bootstrap-datepicke のダウンロード
https://github.com/uxsolutions/bootstrap-datepicker
onlineデモをおし、チェンジされた画面で左上のダウンロード

demo画面

htmlと同じフォルダにbootstrap-datepickerフォルダを作りダウンロードしたCSS.JS.localesフォルダをコピー
bootstrap用は、CSS,JSともhtmlと同じフォルダに

記載方法は
（なぜか../jsの記載では読み込まれないので注意）

 <!-- jQuery -->
<script src="js/jquery-3.4.1.slim.min.js"></script>

<!-- Bootstrap CSS -->
<script src="js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- bootstrap-datepickerを読み込む -->
<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="container">
    <div class="row mt-4">
        <div class="col-2">
            <label>日付：</label>
        </div>
        <div class="col-5">
 
            <!-- ここにカレンダー表示用のテキストボックスを追加 -->
            <input type="text" class="form-control" id="bootstrap-datepicker">
 
        </div>
    </div>
</div>
 
<!-- bootstrap-datepickerのjavascriptコード -->
<script>
    $('#bootstrap-datepicker').datepicker(
	{	format: "yyyy/mm/dd",
		language: 'ja'
	});

一応2020年3月時点の最新バージョンでは日付け入力OKである
なお、当日日付け表示は、textにvalueで日付けをセットしておく
注意として$(‘#bootstrap-datepicker’).datepickerはtext IDより下に書くこと

カテゴリー php