Step1: javascript fileの読み込み
<!-- カレンダー用 --> <?=$this->Html->script("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js");?> <?=$this->Html->script("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js");?> <?=$this->Html->css("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css");?>
Step2: Formの記述
実際に入力フォームを作りたい位置に以下を書き込みます。
<div class='datepicker' id='datepicker-popup'> <?php echo $this->Form->text('billing_date', ['placeholder' => __('日にち')]); ?> <span class="input-group-addon input-group-append boder-left"> <span class='mdi mdi-calendar input-group-text'></span> </span> </div>
Step3: 設定を記述
デフォルトのままだとフォーマットがmm/dd/yyyyなので以下でフォーマットを調整します。
<script> $(document).ready(function(){ $('#datepicker-popup').datepicker({ format: "yyyy/mm/dd" }); }); </script>
これで完了です。