【CakePHP3】「type=’date’」の日付フォームをカレンダーの形に上書き(オーバーライド)する方法

プログラミング
スポンサーリンク

ふと思いました。

CakePHP3、カレンダーフォームなくね?

そうなんです。

誕生日用にフォームをhtmlヘルパーで作ろうとすると。

<?=$this->Form->input('birthday',['type'=>'date']);?>

こんな風にセレクトボックスになってしまうんです。

セレクトボックス、使いません。

日付でセレクトボックス、使わないよ!

ここでは、セレクトボックスではなくDateのインプットがデフォルトで出力される設定を調べましたのでご紹介します。

準備

データベース周り

まずはデータベースから準備します。

今回はわかりやすいように僕の友人(妄想)の給料を一覧するテーブルを作りました。

CREATE TABLE `my_friends` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(256) DEFAULT NULL,
  `birthday` date DEFAULT NULL,
  `salary` int(11) DEFAULT NULL,
  `address` varchar(256) DEFAULT NULL,
  `email` varchar(256) DEFAULT NULL,
  `created` datetime DEFAULT NULL,
  `modified` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=61 DEFAULT CHARSET=utf8

CakePHP周り

ほとんど、bake allで作成したソースのままなのですが、
今回は、「type=’date’」のフォームの生成が変更されたことを確認したいので、
誕生日の箇所だけ変更しました。

<?=$this->Form->input('birthday',['type'=>'date']);?>

FORMヘルパーを上書き(オーバーライド)

src>View>AppView.phpを変更します。

initializeがすでに作られているので、以下のように変更してみてください。

変更前

    /**
     * Initialization hook method.
     *
     * Use this method to add common initialization code like loading helpers.
     *
     * e.g. `$this->loadHelper('Html');`
     *
     * @return void
     */
    public function initialize()
    {
    }

変更後

    /**
     * Initialization hook method.
     *
     * Use this method to add common initialization code like loading helpers.
     *
     * e.g. `$this->loadHelper('Html');`
     *
     * @return void
     */
    public function initialize()
    {
	    $this->Form->setTemplates([
	        'dateWidget'=>'<input type="Date" name="{{name}}" value="{{value}}">'
	    ]);
    }

上記のように、initializeでsetTemplatesメソッドで設定できます。

dateタイプの出力を変更したい場合は、’dateWiget’を指定します。

表示も正常に変わりました。

カレンダーも表示されます。

 

そのほか、カスタマイズ可能なテンプレートは下記のサイトで確認できます。

Class Cake\View\Helper\FormHelper | CakePHP 3.7

お試しください。

 

 

タイトルとURLをコピーしました