jqueryのdataPickerを使って日付をカレンダーから入力する

CakePHP

目って大事ですよね。
目の大きさ、白目黒目のバランスなどは人の第一印象を大きく左右する要因として有名です。mixiニュースで見たんですが、目が一番可愛らしく見えるのは、白目：黒目：白目のバランスが1:2:1の場合だそうです。
他にも、腹黒い人、詐欺師のような人は黒目の上半分がまぶたによって隠れるそうです。
理由は言いませんが、それを知ってかなり落ち込んでいるsanojiです。

WEBサイトの日付入力について。
日付入力といえば、テキストボックスによる直接入力や、年・月・日ごとにセレクトボックスで選択する方法や、候補日をラジオボタンで選択する方法がありますが、最近の定番はカレンダーからの選択ではないでしょうか。

CakePHPのデフォルトでは、年月日セレクトボックス形式で非常にイケてないですね。
CakePHPでは、protocalendar.jsを使用した日付入力が定番になっていそうですが、今回はあえてjquery + ui.datepicker.jsを使ったHelperを作ってみました。

まず、以下の3つのファイルをダウンロードします。
jquery-1.3.2.min.js(http://jquery.com/)
ui.datepicker.js, ui.datepicker.css(http://plugins.jquery.com/project/datepicker)

次に、ui.datepicker.jsの表示を日本語化するjsファイルを作ります。

#ui.datepicker.ja.js
jQuery(function($){   
    $.datepicker.regional['ja'] = {clearText: '', clearStatus: '',   
        closeText: '閉じる', closeStatus: '',   
        prevText: '<前月', prevStatus: '',   
        nextText: '次月>', nextStatus: '',   
        currentText: '今日', currentStatus: '',   
        monthNames: ['1月','2月','3月','4月','5月','6月',   
        '7月','8月','9月','10月','11月','12月'],   
        monthNamesShort: ['1月','2月','3月','4月','5月','6月',   
        '7月','8月','9月','10月','11月','12月'],   
        monthStatus: '', yearStatus: '',   
        weekHeader: 'Wk', weekStatus: '',   
        dayNames: ['日','月','火','水','木','金','土'],   
        dayNamesShort: ['日','月','火','水','木','金','土'],   
        dayNamesMin: ['日','月','火','水','木','金','土'],   
        dayStatus: 'DD', dateStatus: 'D, M d',   
        dateFormat: 'yy/mm/dd', firstDay: 0,    
        initStatus: '', isRTL: false};   
    $.datepicker.setDefaults($.datepicker.regional['ja']);   
});

保存したら、各js,cssを、app\webroot\以下の既定のフォルダに置きます。

次に、ヘルパークラスを作成します。
「app\views\helpers」に、「date_picker.php」というファイルを作ります。

#date_picker.php
<?php
/**
 * jQuery.datepicker.jsをCakePHP1.2で呼ぶためのHelperクラス.
 */
class DatePickerHelper extends Helper {
	//ヘルパー
	var $helpers = array("Form", "Html", "Javascript");

	/**
	 * テキストボックス形式のDatePickerを表示する.
	 * @param $filedName モデルのフィールド名
	 * @param $options フォームヘルパーに引き渡すオプション
	 * @param $dpOptions DatePicker特有のオプション（未使用）
	 */
	function datePicker($fieldName, $options = array(), $dpOptions = array()) {
		
		//外部ファイル
		$ext = $this->Javascript->link("ui.datepicker")
			. $this->Javascript->link("ui.datepicker.ja")
			. $this->Html->css("ui.datepicker");
		
		//テキストボックスのhtml
		$ext .= $this->Form->input($fieldName, $options);

		//テキストボックスのID
		if(isset($options["id"])) {
			$id = $options["id"];
		} else {
			$id = $this->Form->domId(array(), "for");
		}
		
		//スクリプト部分
		$script =
			"jQuery(function($){".
			"$(\"#".$id["for"]."\").datepicker();".
			"});";

		return $ext . $this->Javascript->codeBlock($script);
	}
}
?>

※第3引数は宣言だけで使用されません。本当はui.datepicker.jsのオプションに対応させようと思ったんですが、あまり必要なかったので断念してしまいました。

呼び出すcontrollerのクラス変数$helpersに"DatePicker"を追加してください。

var $helpers = array("DatePicker");

viewでは、以下のように呼び出します。

<?php echo $datePicker->datePicker("hogehoge.date", array(
	"type" => "text",
	"label" => false,
	"style" => "width:80px;",
	"readonly" => true,
));?>

以上です。
祝日判定が無かったりと、なかなか実用には堪えないかもしれません。
実際の業務などで使用する場合は、Sookies Labsさんが公開して下さっているprotocalendar.jsと、対応しているCakePHP用のHelperを使うと良いかもしれません。