2009/10/17

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

続きまして日付の絞り込みでございます。せっかくなので、カレンダーから選ぶ感じでの入力に対応させたいなあと思い、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を、無理矢理くっつけちゃいました。

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

ひとり仕事: フリーランスという働き方
(2012-10-5)
売り上げランキング: 14,705
100円

加藤 康祐 / 企画・設計

1980年1月12日生まれ。フリーランス歴15年。プランナー、デザイナー。加藤康祐企画設計代表。学生時代にデザイン会社でWebデザインを経験。2005年よりフリーランスとしてキャリアスタート。これまでに個人から上場企業まで、100以上のクライアントとのプロジェクトを経験。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの編集・運営、社会的養護の子どもたちの自立を支援するNPOのサポート等。趣味はラグビーと料理。Keep the head up, Bind tight & Stay low.

加藤康祐企画設計

是非、フォローしてください!
Twitter / Instagram