この記事では、日付を入力するためのフォーム実装方法と、それによって得られた日付データの表示方法について紹介します。
なお、その他の入力フォームについては以下記事で紹介しています。
![](https://noveblo.com/wp-content/uploads/2022/12/eccube-choicetype-eyecatch-400x210.jpg)
デバッグモードを設定しておくと、エラーが起きたときに詳細情報が表示されるようになります。
エラー箇所を探しやすくなるので、開発前に設定しておくのをオススメします。
デバッグモードの設定方法については 以下記事 で解説しています。
カスタマイズ後は、デバッグモードの解除を忘れないように。
EC-CUBEにおけるフォーム実装方法
通常のHTMLでは、日付を入力するフォーム部品は<form>タグ内に<input>要素を配置することで実装します。
<input type="date">
ただEC-CUBEが採用しているPHPフレームワーク・Symfonyでは、Symfony Formsという機能を利用するのが基本です。FormBuilderというオブジェクトを作成し、そこにaddメソッドでフィールドを追加することでフォームを実装します。
$builder -> add( 名前, タイプ, [ 属性 ])
EC-CUBEで日付の入力フォームを実装する
日付のフォーム部品をaddメソッドで実装するには、その第二引数にDateType::classを指定します。
DateTypeを使うには、事前にuseで読み込んでおく必要があります。
これを忘れるとエラーになるので、必ず最初に以下コードを記述しておきましょう。
use Symfony\Component\Form\Extension\Core\Type\DateType;
addメソッドは以下のように記述します。
->add('name', DateType::class, [
'widget' => 'single_text',
]);
第三引数の連想配列内で、「’widget’ => ‘single_text’」と指定しています。これを記述することで、『年 / 月 / 日』を一つの入力フォーム内で表示・入力させることができます。
お問い合わせ(入力ページ)に実装してみた
お問い合わせページに、『お届け希望日』を入力するフォームを用意してみました。
「年/月/日」を入力でき、カレンダーから日付を選択することもできるようになります。
![入力フォーム一行の場合の表示画面](https://noveblo.com/wp-content/uploads/2022/12/72e37ef441f7f31ed5e1ff8d55449174.jpg)
![カレンダーから選択する場合の表示画面](https://noveblo.com/wp-content/uploads/2022/12/fd543643ee008791d8f34a91dd81a89a.jpg)
「’widget’ => ‘single_text’」を指定しない場合は、年/月/日を別々に入力するフォームが実装されます。
![年月日を個別に入力するフォーム(デフォルト)の表示画面](https://noveblo.com/wp-content/uploads/2022/12/7dae963eda88bc10ed6d18a72a0d7c44.jpg)
日付データをTwigテンプレートで表示する
日付入力フォームはできましたが、これを他のテキストフォームと同じように表示させようとすると、『Object of class DateTime could not be converted to string(DateTime オブジェクトはStringに変換できません)』という以下のようなエラーが出てしまいます。
![エラー画面(Object-of-class-DateTime-could-not-be-converted-to-string)](https://noveblo.com/wp-content/uploads/2022/12/769767139a83f1162fd11380a3a1f877.jpg)
日付は、そのままではTwigテンプレートでテキスト表示できません。
以下のようにdateフィルターを用いることで、指定の形式で出力できます。
{{ 日付 | date(出力形式) }}
()に出力する形式を指定します。主に以下のような形式が使われます。
- “Y-m-d” → 「20YY-MM-DD」
- “Y/m/d” → 「20YY/MM/DD」
お問い合わせ(確認ページ)に実装してみた
Twigテンプレートの表示させたい部分に、以下コードを挿入します。
<dl>
<dt>
{{ form_label(form.delivery_date, 'お届け希望日', {'label_attr': {'class': 'ec-label'}}) }}
</dt>
<dd>
{{ form.delivery_date.vars.data|date('Y/m/d') }}
{{ form_widget(form.delivery_date, { type : 'hidden' }) }}
</dd>
</dl>
{{ form.delivery_date.vars.data|date(‘Y/m/d’) }}とすると、年・月・日が「/」で区切られて表示されます。
![日付フォーム入力後の表示画面](https://noveblo.com/wp-content/uploads/2022/12/d0efb871edbeaa01c79b5ebfbb195354.jpg)
まとめ
以上、日付入力フォームの実装方法について紹介しました。
フォームの生成については、テキストなどと同じように実装できるため、すぐに使えると思います。ただ日付データをTwig側で表示するのにクセがあり、実はこれの解消に少しハマりました。。。
同じようなトラブルに直面している方の参考になれば嬉しいです!