CakePHPで日付を絞り込み、jQuery UI Datepickerを使ってみる

Posted on | 2009/10/17 19:13:21

続きまして日付の絞り込みでございます。せっかくなので、カレンダーから選ぶ感じでの入力に対応させたいなあと思い、jQueryを使うことにしました。

jQuery UI – Demos & Documentation

default.ctp
ヘッダでJSとCSSを読み込んだ後に、個別設定を下記のようにしました。日付のフォーマットは、面倒なのでデータベースに合わせています。

<script type="text/javascript">
$(function() {
$(‘#datepickerbegin’).datepicker({
numberOfMonths: 3,
showButtonPanel: true,
dateFormat: ‘yy-mm-dd’
});
});
$(function() {
$(‘#datepickerend’).datepicker({
numberOfMonths: 3,
showButtonPanel: true,
dateFormat: ‘yy-mm-dd’
});
});
</script>

で、実際のフォームの部分。

<form method="post" action="<?php echo $html->url(‘/contents/view_datepick’)?>">
Begin: <?php echo $form->input(‘begindate’,array(‘id’ => ‘datepickerbegin’, ‘label’=>false, ‘div’ =>false));?>
End: <?php echo $form->input(‘enddate’,array(‘id’ => ‘datepickerend’, ‘label’=>false, ‘div’ =>false));?>
<span class="submit"><?php echo $form->submit(‘Pick’,array(‘label’=>false, ‘div’ =>false)); ?></span>
</form>

その後、コントローラに検索機能を追加します。

contents_controller.php

function view_datepick() {
if(empty($this->data)) {
$this->render();
} else {
$begindate = $this->data['begindate'].’ 00:00:00′;
$enddate = $this->data['enddate'].’ 23:59:59′;
$this->Content->order = "date DESC";
$this->paginate = array("conditions" => array(‘Content.date >=’ => $begindate, ‘Content.date <=’ => $enddate));
$this->set(‘contents’, $this->paginate());
}
}

昔Windowsアプリで日付周りをいじった時は面倒くさかった記憶があるので、楽をしようと思い、data['begindate']に00:00:00を、data['enddate']に23:59:59を、無理矢理くっつけちゃいました。

うおー、絞り込みできている。感動です。

• 

  意外と知らない、「ヒトリシゴト」。案外、愉快で、楽しいです。気軽に読める、ビジネスエッセイ。

• 

  プランナー、加藤康祐のブログ、kosukekato.com : the idea espressoに掲載したコラム、2006/7/20「歴史は作られている」から2010/5/23「行為が流通するプラットフォームに新しい時代を感じる」を一冊の本にしました。

• 

  今話題のInstagramを使った写真集です！あなたもInstagramするきっかけになれば！68点の写真を収録。