jQuery
DatePicker
cakephp3

CakePHP3でdatepickerフォームの初期表示フォーマットでハマる

今回のお題

jQueryUIのdatepickerを設定しているinputフォームに対して
初期表示が上手くできなかったので備忘録として残します。

現象

データは以下のようになっています。
join_dateはdate形式です。

select.sql
select
  join_date
from
  users;

+--------------+
|  join_date  |
+--------------+
|  2018-04-06 |
+---------------+

detail.ctp
 <?= $this->Form->input('join_date', [
    'type' => 'text',
    'class'=> 'date-picker',
    'label' => false,
  ]); ?>

これをブラウザで確認すると、

detail.html
<input name="join_date" class="date-picker" id="join-date" value="2018/04/06" type="text">

htmlソースではyyyy/mm/dd形式なのに、画面上ではyy/mm/dd形式で表示されます。
datepicker.jsで日付を設定するにはsetDateを使うとのこと。
以下のソースコードを追加します。

detail.ctp
<script>
    $(function () {
        // datepicker 初期表示日付フォーマット設定
        $(".date-picker").datepicker("option", "dateFormat", 'yy/mm/dd' );
        $('#join-date').datepicker('setDate', '<?= ($user['join_date']) ? $user['join_date']->format('Y/m/d') : "" ?>')
    });
</script>

これでyyyy/mm/dd表示されるようになりました。

join_dateが未設定の場合に当日の日付が初期表示として入ってしまうので
三項演算子を使って空文字を入れるように設定しています。