【EC-CUBE 4】日付の入力フォーム実装とTwigでの表示方法

2023年3月15日

この記事では、日付を入力するためのフォーム実装方法と、それによって得られた日付データの表示方法について紹介します。

なお、その他の入力フォームについては以下記事で紹介しています。

EC-CUBEにおけるフォーム実装方法

通常のHTMLでは、日付を入力するフォーム部品は<form>タグ内に<input>要素を配置することで実装します。

<input type="date">

ただEC-CUBEが採用しているPHPフレームワーク・Symfonyでは、Symfony Formsという機能を利用するのが基本です。FormBuilderというオブジェクトを作成し、そこにaddメソッドでフィールドを追加することでフォームを実装します。

$builder -> add( 名前, タイプ, [ 属性 ])

注文やお問い合わせのフォームなどは「src/Eccube/Form/Type」下に「○○Type.php」として多数保存されています。これらのファイルを見ると、フォーム生成部分には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’」と指定しています。これを記述することで、『年 / 月 / 日』を一つの入力フォーム内で表示・入力させることができます。

お問い合わせ(入力ページ)に実装してみた

お問い合わせページに、『お届け希望日』を入力するフォームを用意してみました。

「年/月/日」を入力でき、カレンダーから日付を選択することもできるようになります。

入力フォーム一行の場合の表示画面 — 「DateType」と「’widget’ => ‘single_text’」でフォームを実装したときの表示

カレンダーから選択する場合の表示画面 — フォーム右端のカレンダーアイコンをクリック → カレンダーから日付を選択できます。

「’widget’ => ‘single_text’」を指定しない場合は、年/月/日を別々に入力するフォームが実装されます。

年月日を個別に入力するフォーム（デフォルト）の表示画面 — 「’widget’ => ‘single_text’」なしで実装したときの表示

日付データをTwigテンプレートで表示する

日付入力フォームはできましたが、これを他のテキストフォームと同じように表示させようとすると、『Object of class DateTime could not be converted to string（DateTime オブジェクトはStringに変換できません）』という以下のようなエラーが出てしまいます。

エラー画面（Object-of-class-DateTime-could-not-be-converted-to-string）

日付は、そのままでは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’) }}とすると、年・月・日が「/」で区切られて表示されます。

まとめ

以上、日付入力フォームの実装方法について紹介しました。

フォームの生成については、テキストなどと同じように実装できるため、すぐに使えると思います。ただ日付データをTwig側で表示するのにクセがあり、実はこれの解消に少しハマりました。。。

同じようなトラブルに直面している方の参考になれば嬉しいです！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！