{"id":31,"date":"2023-10-05T17:01:00","date_gmt":"2023-10-05T15:01:00","guid":{"rendered":"https:\/\/typo3demosite.com\/?p=31"},"modified":"2025-02-13T00:37:52","modified_gmt":"2025-02-12T22:37:52","slug":"create-custom-month-year-form-filed-in-symfony-forms","status":"publish","type":"post","link":"https:\/\/typo3demosite.com\/?p=31","title":{"rendered":"Create custom Month\/Year form filed in Symfony Forms"},"content":{"rendered":"\n

To create a custom form field in Symfony 5 for DateTime data type that only shows the month and year, you can create a custom form type and a custom widget to manage this. Here\u2019s how you can achieve it:<\/p>\n\n\n\n

Create the Custom Form Type<\/h2>\n\n\n\n

First, we will need create a custom form type that uses only the month and year fields. We will make it with configurable option with definition of which years range to show.<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
\/\/ src\/Form\/MonthYearType.php<\/span><\/span>\n<?<\/span>php<\/span><\/span>\nnamespace<\/span> App<\/span>\\<\/span>Form<\/span>;<\/span><\/span>\n<\/span>\nuse<\/span> App<\/span>\\<\/span>Form<\/span>\\<\/span>Form<\/span>\\<\/span>DataTransformer<\/span>\\<\/span>MonthYearToDateTransformer<\/span>;<\/span><\/span>\nuse<\/span> Symfony<\/span>\\<\/span>Component<\/span>\\<\/span>Form<\/span>\\<\/span>AbstractType<\/span>;<\/span><\/span>\nuse<\/span> Symfony<\/span>\\<\/span>Component<\/span>\\<\/span>Form<\/span>\\<\/span>Extension<\/span>\\<\/span>Core<\/span>\\<\/span>Type<\/span>\\<\/span>ChoiceType<\/span>;<\/span><\/span>\nuse<\/span> Symfony<\/span>\\<\/span>Component<\/span>\\<\/span>Form<\/span>\\<\/span>FormBuilderInterface<\/span>;<\/span><\/span>\nuse<\/span> Symfony<\/span>\\<\/span>Component<\/span>\\<\/span>HttpFoundation<\/span>\\<\/span>RequestStack<\/span>;<\/span><\/span>\nuse<\/span> Symfony<\/span>\\<\/span>Component<\/span>\\<\/span>OptionsResolver<\/span>\\<\/span>OptionsResolver<\/span>;<\/span><\/span>\n<\/span>\nclass<\/span> <\/span>MonthYearType<\/span> <\/span>extends<\/span> <\/span>AbstractType<\/span><\/span>\n{<\/span><\/span>\n    <\/span>public<\/span> <\/span>function<\/span> <\/span>__construct<\/span>(<\/span>private<\/span> <\/span>RequestStack<\/span> <\/span>$<\/span>requestStack<\/span>)<\/span><\/span>\n    <\/span>{<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>public<\/span> <\/span>function<\/span> <\/span>buildForm<\/span>(<\/span>FormBuilderInterface<\/span> <\/span>$<\/span>builder<\/span>,<\/span> <\/span>array<\/span> <\/span>$<\/span>options<\/span>)<\/span><\/span>\n    <\/span>{<\/span><\/span>\n        <\/span>$<\/span>builder<\/span><\/span>\n            <\/span>-><\/span>add<\/span>(<\/span>'<\/span>month<\/span>'<\/span>,<\/span> <\/span>ChoiceType<\/span>::class<\/span>,<\/span> <\/span>[<\/span><\/span>\n                <\/span>'<\/span>choices<\/span>'<\/span> <\/span>=><\/span> <\/span>$this-><\/span>getMonthChoices<\/span>(),<\/span><\/span>\n                <\/span>'<\/span>placeholder<\/span>'<\/span> <\/span>=><\/span> <\/span>'<\/span>Monat ausw\u00e4hlen<\/span>'<\/span>,<\/span><\/span>\n                <\/span>'<\/span>label<\/span>'<\/span> <\/span>=><\/span> <\/span>false<\/span>,<\/span><\/span>\n            <\/span>])<\/span><\/span>\n            <\/span>-><\/span>add<\/span>(<\/span>'<\/span>year<\/span>'<\/span>,<\/span> <\/span>ChoiceType<\/span>::class<\/span>,<\/span> <\/span>[<\/span><\/span>\n                <\/span>'<\/span>choices<\/span>'<\/span> <\/span>=><\/span> <\/span>$this-><\/span>getYearChoices<\/span>(<\/span>$<\/span>options<\/span>[<\/span>'<\/span>years_range<\/span>'<\/span>]),<\/span><\/span>\n                <\/span>'<\/span>placeholder<\/span>'<\/span> <\/span>=><\/span> <\/span>'<\/span>Jahr ausw\u00e4hlen<\/span>'<\/span>,<\/span><\/span>\n                <\/span>'<\/span>label<\/span>'<\/span> <\/span>=><\/span> <\/span>false<\/span>,<\/span><\/span>\n            <\/span>])<\/span><\/span>\n            <\/span>-><\/span>addModelTransformer<\/span>(<\/span>new<\/span> <\/span>MonthYearToDateTransformer<\/span>())<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>private<\/span> <\/span>function<\/span> <\/span>getMonthChoices<\/span>()<\/span>:<\/span> <\/span>array<\/span><\/span>\n    <\/span>{<\/span><\/span>\n        <\/span>$<\/span>locale<\/span> <\/span>=<\/span> <\/span>$this-><\/span>requestStack<\/span>-><\/span>getCurrentRequest<\/span>()<\/span>-><\/span>getLocale<\/span>()<\/span>;<\/span><\/span>\n        <\/span>$<\/span>formatter<\/span> <\/span>=<\/span> <\/span>new<\/span> <\/span>\\<\/span>IntlDateFormatter<\/span>(<\/span><\/span>\n            <\/span>$<\/span>locale<\/span>,<\/span><\/span>\n            <\/span>\\<\/span>IntlDateFormatter<\/span>::<\/span>NONE<\/span>,<\/span><\/span>\n            <\/span>\\<\/span>IntlDateFormatter<\/span>::<\/span>NONE<\/span>,<\/span><\/span>\n            <\/span>\\<\/span>date_default_timezone_get<\/span>(),<\/span><\/span>\n            <\/span>\\<\/span>IntlDateFormatter<\/span>::<\/span>GREGORIAN<\/span>,<\/span><\/span>\n            <\/span>'<\/span>MMMM<\/span>'<\/span><\/span>\n        <\/span>)<\/span>;<\/span><\/span>\n        <\/span>for<\/span>(<\/span>$<\/span>i<\/span> <\/span>=<\/span> <\/span>1<\/span>;<\/span> <\/span>$<\/span>i<\/span> <\/span><=<\/span> <\/span>12<\/span>;<\/span> <\/span>$<\/span>i<\/span>++<\/span>)<\/span> <\/span>{<\/span><\/span>\n            <\/span>$<\/span>months<\/span>[<\/span>$<\/span>formatter<\/span>-><\/span>format<\/span>(<\/span>mktime<\/span>(<\/span>0<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>0<\/span>,<\/span> <\/span>$<\/span>i<\/span>,<\/span> <\/span>1<\/span>))]<\/span> <\/span>=<\/span> <\/span>$<\/span>i<\/span>;<\/span><\/span>\n        <\/span>}<\/span><\/span>\n        <\/span>return<\/span> <\/span>$<\/span>months<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>private<\/span> <\/span>function<\/span> <\/span>getYearChoices<\/span>(<\/span>array<\/span> <\/span>$<\/span>yearsRange<\/span>)<\/span>:<\/span> <\/span>array<\/span><\/span>\n    <\/span>{<\/span><\/span>\n        <\/span>$<\/span>years<\/span> <\/span>=<\/span> <\/span>[]<\/span>;<\/span><\/span>\n        <\/span>for<\/span> <\/span>(<\/span>$<\/span>i<\/span> <\/span>=<\/span> <\/span>$<\/span>yearsRange<\/span>[<\/span>1<\/span>]<\/span>;<\/span> <\/span>$<\/span>i<\/span> <\/span>>=<\/span> <\/span>$<\/span>yearsRange<\/span>[<\/span>0<\/span>]<\/span>;<\/span> <\/span>$<\/span>i<\/span>--<\/span>)<\/span> <\/span>{<\/span><\/span>\n            <\/span>$<\/span>years<\/span>[<\/span>$<\/span>i<\/span>]<\/span> <\/span>=<\/span> <\/span>$<\/span>i<\/span>;<\/span><\/span>\n        <\/span>}<\/span><\/span>\n<\/span>\n        <\/span>return<\/span> <\/span>$<\/span>years<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n<\/span>\n    <\/span>public<\/span> <\/span>function<\/span> <\/span>configureOptions<\/span>(<\/span>OptionsResolver<\/span> <\/span>$<\/span>resolver<\/span>)<\/span><\/span>\n    <\/span>{<\/span><\/span>\n        <\/span>$<\/span>resolver<\/span>-><\/span>setDefaults<\/span>([<\/span><\/span>\n            <\/span>'<\/span>years_range<\/span>'<\/span> <\/span>=><\/span> <\/span>[<\/span>date<\/span>(<\/span>'<\/span>Y<\/span>'<\/span>)<\/span> <\/span>-<\/span> <\/span>40<\/span>,<\/span> <\/span>date<\/span>(<\/span>'<\/span>Y<\/span>'<\/span>)],<\/span><\/span>\n            <\/span>'<\/span>data_class<\/span>'<\/span> <\/span>=><\/span> <\/span>null<\/span>,<\/span><\/span>\n        <\/span>])<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
Customize the Form Widget<\/h2>\n\n\n\n
Now we will need to customize how the fields are rendered in the form.<\/p>\n\n\n\n
In order to do this, first, we will create twig template:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
{# templates\/form\/fields\/month_year_widget.html.twig #}<\/span><\/span>\n<\/span>\n{%-<\/span> <\/span>block<\/span> <\/span>month_year_widget<\/span> <\/span>-%}<\/span><\/span>\n<div<\/span> <\/span>{{<\/span> <\/span>block<\/span>(<\/span>'<\/span>widget_container_attributes<\/span>'<\/span>)<\/span> <\/span>-}}<\/span>><\/span><\/span>\n    <\/span><div<\/span> <\/span>class<\/span>=<\/span>"<\/span>input-group<\/span>"<\/span>><\/span><\/span>\n        <\/span>{{<\/span> form_widget<\/span>(<\/span>form<\/span>.<\/span>month<\/span>)<\/span> <\/span>}}<\/span><\/span>\n        <\/span>{{<\/span> form_widget<\/span>(<\/span>form<\/span>.<\/span>year<\/span>)<\/span> <\/span>}}<\/span><\/span>\n    <\/span><\/div><\/span><\/span>\n<\/div><\/span><\/span>\n{%-<\/span> <\/span>endblock<\/span> <\/span>month_year_widget<\/span> <\/span>-%}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
And then add this template to the form themes:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
# config\/packages\/twig.yaml<\/span><\/span>\ntwig<\/span>:<\/span><\/span>\n    <\/span>form_themes<\/span>:<\/span><\/span>\n        <\/span>-<\/span> <\/span>'<\/span>form\/fields\/month_year_widget.html.twig<\/span>'<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Use Our Custom Mont and Year Form Type in a Form<\/h2>\n\n\n\n
Now that we\u2019ve created the custom form type, we can use it in any of your forms as follows:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
use<\/span> App<\/span>\\<\/span>Form<\/span>\\<\/span>Type<\/span>\\<\/span>MonthYearType<\/span>;<\/span><\/span>\n...<\/span><\/span>\n...<\/span>..<\/span><\/span>\n$<\/span>builder<\/span>-><\/span>add<\/span>(<\/span>'<\/span>dateField<\/span>'<\/span>,<\/span> <\/span>MonthYearType<\/span>::class<\/span>,<\/span> <\/span>[<\/span><\/span>\n    <\/span>'<\/span>years_range<\/span>'<\/span> <\/span>=><\/span> <\/span>[<\/span>2000<\/span>,<\/span> <\/span>2030<\/span>],<\/span> <\/span><\/span>\n])<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Create the Data Transformer<\/h2>\n\n\n\n
In order to let our custom field work with \\DateTimeInterface data type, we’ll have to add data transformer.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
\/\/ src\/Form\/Form\/DataTransformer\/MonthYearToDateTransformer.php<\/span><\/span>\n<?<\/span>php<\/span><\/span>\nnamespace<\/span> App<\/span>\\<\/span>Form<\/span>\\<\/span>Form<\/span>\\<\/span>DataTransformer<\/span>;<\/span><\/span>\nuse<\/span> Symfony<\/span>\\<\/span>Component<\/span>\\<\/span>Form<\/span>\\<\/span>DataTransformerInterface<\/span>;<\/span><\/span>\nclass<\/span> <\/span>MonthYearToDateTransformer<\/span> <\/span>implements<\/span> <\/span>DataTransformerInterface<\/span><\/span>\n{<\/span><\/span>\n    <\/span>public<\/span> <\/span>function<\/span> <\/span>transform<\/span>(<\/span>$<\/span>value<\/span>)<\/span><\/span>\n    <\/span>{<\/span><\/span>\n        <\/span>if<\/span> <\/span>(<\/span>$<\/span>value<\/span> <\/span>instanceof<\/span> <\/span>\\<\/span>DateTimeInterface<\/span>)<\/span> <\/span>{<\/span><\/span>\n            <\/span>return<\/span> <\/span>[<\/span><\/span>\n                <\/span>'<\/span>month<\/span>'<\/span> <\/span>=><\/span> <\/span>$<\/span>value<\/span>-><\/span>format<\/span>(<\/span>'<\/span>n<\/span>'<\/span>),<\/span><\/span>\n                <\/span>'<\/span>year<\/span>'<\/span> <\/span>=><\/span> <\/span>$<\/span>value<\/span>-><\/span>format<\/span>(<\/span>'<\/span>Y<\/span>'<\/span>),<\/span><\/span>\n            <\/span>]<\/span>;<\/span><\/span>\n        <\/span>}<\/span><\/span>\n        <\/span>return<\/span> <\/span>null;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n    <\/span>public<\/span> <\/span>function<\/span> <\/span>reverseTransform<\/span>(<\/span>$<\/span>value<\/span>)<\/span><\/span>\n    <\/span>{<\/span><\/span>\n        <\/span>if<\/span> <\/span>(<\/span>!<\/span>is_array<\/span>(<\/span>$<\/span>value<\/span>)<\/span> <\/span>||<\/span> <\/span>!<\/span>array_key_exists<\/span>(<\/span>'<\/span>month<\/span>'<\/span>,<\/span> <\/span>$<\/span>value<\/span>)<\/span> <\/span>||<\/span> <\/span>!<\/span>array_key_exists<\/span>(<\/span>'<\/span>year<\/span>'<\/span>,<\/span> <\/span>$<\/span>value<\/span>))<\/span> <\/span>{<\/span><\/span>\n            <\/span>return<\/span> <\/span>null;<\/span><\/span>\n        <\/span>}<\/span><\/span>\n        <\/span>return<\/span> <\/span>new<\/span> <\/span>\\<\/span>DateTimeImmutable<\/span>(<\/span>$<\/span>value<\/span>[<\/span>'<\/span>year<\/span>'<\/span>]<\/span> <\/span>.<\/span> <\/span>'<\/span>-<\/span>'<\/span> <\/span>.<\/span> <\/span>$<\/span>value<\/span>[<\/span>'<\/span>month<\/span>'<\/span>]<\/span> <\/span>.<\/span> <\/span>'<\/span>-01<\/span>'<\/span>)<\/span>;<\/span><\/span>\n    <\/span>}<\/span><\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
To create a custom form field in Symfony 5 for DateTime data type that only […]<\/p>\n","protected":false},"author":1,"featured_media":33,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[13,14],"class_list":["post-31","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-symfony","tag-symfony","tag-twig"],"_links":{"self":[{"href":"https:\/\/typo3demosite.com\/index.php?rest_route=\/wp\/v2\/posts\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/typo3demosite.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/typo3demosite.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/typo3demosite.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/typo3demosite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=31"}],"version-history":[{"count":3,"href":"https:\/\/typo3demosite.com\/index.php?rest_route=\/wp\/v2\/posts\/31\/revisions"}],"predecessor-version":[{"id":73,"href":"https:\/\/typo3demosite.com\/index.php?rest_route=\/wp\/v2\/posts\/31\/revisions\/73"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/typo3demosite.com\/index.php?rest_route=\/wp\/v2\/media\/33"}],"wp:attachment":[{"href":"https:\/\/typo3demosite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=31"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/typo3demosite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=31"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/typo3demosite.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}