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を、無理矢理くっつけちゃいました。
うおー、絞り込みできている。感動です。
加藤 康祐 / 企画・設計
プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。
是非、フォローしてください！
Twitter / Instagram
売り上げランキング: 14,705
100円
フリーランスとして働き始めるってどういうことだったのか？フリーランスとして働くってどういうことなのか？フリーランスが目指すことってなんなのか？5年間の自分の経験から書きました。（2010年執筆）
