1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

今回のお題

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?