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円