CakePHP3でjQuery UIのdatetimepickerを使って値を保存する方法
47 回閲覧されました
みなさんこんにちは、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行目は選択した日付を消す為のクリアボタンです。
コントローラーはデフォルトの状態をそのまま使うことができます。