PR

CakePHP 簡単に日付入力

2010.06.08

jQuery で動作するすばらしい日付入力スクリプト「date Picker」。jQuery で作成されているため、 PHP や perl などからも利用できる。ここでは CakePHP から利用できるようにする。

CakePHPでも日付入力欄を簡単に作ることができる。

    echo $form->input(‘YM’, array(
     ‘type’  => ‘date’,
     ‘label’  => ‘Select Date’,
     ‘dateFormat’=> ‘DMY’,
     ‘minYear’ => date(‘Y’) – 1,
     ‘maxYear’ => date(‘Y’)
    ));

たったこれだけでSelectが３つ出力され、簡単に日付を選択することができる。しかし、大量のデータを入力・編集するとなるとこれは面倒になることがある。ここではjQueryとJavascriptを利用してカレンダーを表示し、より直感的に入力できるようにする。どんなふうに入力できるか、何が素晴らしいのかはdate Pickerの公式サイトにあるデモを見て欲しい。

スポンサードリンク

◆準備

  1. jQuery を導入していない場合には http://jquery.com/ からダウンロードし、jquery-x.x.x.min.js を jquery.js にリネームし、webroot/js/に設置する
  2. http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/jquery.datePicker.js をダウンロードし、webroot/js/ に設置
  3. http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/styles/datePicker.css をダウンロードし、webroot/css/ に設置
  4. http://github.com/vitch/jquery-methods/raw/master/date.js をダウンロードし、webroot/js/ に設置
  5. http://www.elibrary.dep.state.pa.us/images/small/calendar.png をダウンロードし、webroot/img/ に設置
  6. http://www.ameibo.com/image/comment_cancel_icon.png をダウンロードし、drop.png にリネームしてから webroot/img/ に設置
  7. http://bakery.cakephp.org/articles/download_code/1413/block/3 をwebroot/js/cake.datePicker.js として設置
  8. http://bakery.cakephp.org/articles/download_code/1413/block/2 をviews/helpers/date_picker.php として設置

◆変更

  1. app_controller.php に $heplers = array(‘Javascript’); を追加する
  2. http://bakery.cakephp.org/articles/download_code/1413/block/4 をviews/layouts/default.ctp に追加する
  3. http://bakery.cakephp.org/articles/download_code/1413/block/1 を対象コントローラに追加する

◇form

echo $form->input(‘start_date’);
　↓
echo $datePicker->picker(‘start_date’);

◆公式サイト

参考文献

スポンサーリンク

コメント