CakePHP3でjQuery UIのdatetimepickerを使って値を保存する方法

CakePHP3でjQuery UIのdatetimepickerを使って値を保存する方法

40 回閲覧されました

みなさんこんにちは、jonioです。

今回はjQuery UIのdatetimepickerを使ってテーブルに値を保存する方法のメモになります。

datetimepickerとは

簡単に日付と時間を設定できるjQueryのプログラムです。

具体的なコードを使って日付を設定するのを実装します。

default.php

まずdatetimepickerを使う為のCDNの設定をdefault.phpにします。

下記の記述をします。

<?= $this->Html->script('https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js') ?>
<?= $this->Html->css('https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css') ?>

テンプレートとjQuery

コードを下記にします。

<?= $this->Form->create(null, ['url' => ['action' => 'add']]) ?>
    <fieldset>
        <legend><?= __('登録') ?></legend>
        <div class="form-group">
            <?php echo $this->Form->control('date', ['label' => '入社日', 'type' => 'text', 'id' => 'datetimepicker', 'class' => 'date-input']) ?>
            <button type="button" class="clear-date btn btn-secondary">クリア</button>
        </div>
    </fieldset>
    <?= $this->Form->button(__('登録'), ['class' => 'btn btn-primary']) ?>
<?= $this->Form->end() ?>

そしてjQueryのコードを下記にします。

$('#datetimepicker').datetimepicker({
    format: 'Y-m-d',
    timepicker: false,
    lang: 'ja',
});

$('.clear-date').on('click', function() {
    let target = $(this).data('target');
    
    $(target).val('');
});

datetimepickerの設定は1行目〜5行目です。

2行目はカレンダーで日付を選択した時にフォームに表示される日付の設定です。

「Y-m-d」の場合は「2024-09-12」の形式で表示されます。

datetimepickerは時間の選択もできますが3行目を書くことで時間の選択をなしにできます。

4行目があることでカレンダーの月名や曜日の名前などが日本語で表示されます。

7行目〜11行目は選択した日付を消す為のクリアボタンです。

コントローラーはデフォルトの状態をそのまま使うことができます。