Chromeはinputタグにtype="date"と入れてやると独自のカレンダーが表示されるので、これを実装したいと思った。
参考: http://qiita.com/growsic/items/b6ef236d9d4f062365b8
FireFoxとか対応してないブラウザもあるのでそちらはbootstrap-datepickerで対応した。
参考: http://chaika.hatenablog.com/entry/2015/09/28/175239
今回はCakePHP2系で開発する。
元となるHTMLにJSを埋め込み、ブラウザ毎の挙動を確認した。
その後inputタグをFormHelperを使って書き直したところ問題が発生した。
<?php
echo $this->Form->input('sampledate', array('type' => 'date'));
これではCakePHPが勝手にselectタグを作成してしまう。
だからといって'type' => 'text'としてしまってはカレンダーは表示されない。
jQueryでtypeの値を変えてしまおうかとも思ったが、どうやら仕様上不可能なようだった。
FormHelperを使わなければいいじゃんという話になりそうだが、解決策はあった。
<?php
echo $this->Form->text('sampledate', array('type' => 'date'));
FormHelper::textを使用し、optionsでtypeを設定してやれば良い。想定通りinputタグのまま出力される。