今回のお題
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が未設定の場合に当日の日付が初期表示として入ってしまうので
三項演算子を使って空文字を入れるように設定しています。