@@ -7,12 +7,8 @@ DateType Field
7
7
A field that allows the user to modify date information via a variety of
8
8
different HTML elements.
9
9
10
- The underlying data used for this field type can be a ``DateTime `` object,
11
- a string, a timestamp or an array. As long as the `input `_ option is set
12
- correctly, the field will take care of all of the details.
13
-
14
- The field can be rendered as a single text box, three text boxes (month,
15
- day and year) or three select boxes (see the `widget `_ option).
10
+ This field can be rendered in a variety of different ways via the `widget `_ option
11
+ and can understand a number of different input formats via the `input `_ option.
16
12
17
13
+----------------------+-----------------------------------------------------------------------------+
18
14
| Underlying Data Type | can be ``DateTime ``, string, timestamp, or array (see the ``input `` option) |
@@ -57,31 +53,78 @@ This field type is highly configurable, but easy to use. The most important
57
53
options are ``input `` and ``widget ``.
58
54
59
55
Suppose that you have a ``publishedAt `` field whose underlying date is a
60
- ``DateTime `` object. The following configures the ``DateType `` type for that
61
- field as three different choice fields::
56
+ ``DateTime `` object. The following configures the ``date `` type for that
57
+ field as ** three different choice fields ** ::
62
58
63
59
use Symfony\Component\Form\Extension\Core\Type\DateType;
64
60
// ...
65
61
66
62
$builder->add('publishedAt', DateType::class, array(
67
- 'input' => 'datetime',
68
63
'widget' => 'choice',
69
64
));
70
65
71
- The ``input `` option *must * be changed to match the type of the underlying
72
- date data. For example, if the ``publishedAt `` field's data were a unix
73
- timestamp, you'd need to set ``input `` to ``timestamp ``::
66
+ If your underlying date is *not * a ``DateTime `` object (e.g. it's a unix timestamp),
67
+ configure the `input `_ option.
68
+
69
+ Rendering a single HTML5 Textbox
70
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
71
+
72
+ For a better user experience, you may want to render a single text field and use
73
+ some kind of "date picker" to help your user fill in the right format. To do that,
74
+ use the ``single_text `` widget::
74
75
75
76
use Symfony\Component\Form\Extension\Core\Type\DateType;
76
77
// ...
77
78
78
79
$builder->add('publishedAt', DateType::class, array(
79
- 'input' => 'timestamp',
80
- 'widget' => 'choice',
80
+ // render as a single text box
81
+ 'widget' => 'single_text',
82
+ ));
83
+
84
+ This will render as an ``input type="date" `` HTML5 field, which means that **some -
85
+ but not all - browsers will add nice date picker functionality to the field **. If you
86
+ want to be absolutely sure that *every * user has a consistent date picker, use an
87
+ external JavaScript library.
88
+
89
+ For example, suppose you want to use the `Bootstrap Datepicker `_ library. First,
90
+ make the following changes::
91
+
92
+ use Symfony\Component\Form\Extension\Core\Type\DateType;
93
+ // ...
94
+
95
+ $builder->add('publishedAt', DateType::class, array(
96
+ 'widget' => 'single_text',
97
+
98
+ // do not render as type="date", to avoid HTML5 date pickers
99
+ 'html5' => false,
100
+
101
+ // add a class that can eb selected in JavaScript
102
+ 'attr' => ['class' => 'js-datepicker'],
81
103
));
82
104
83
- The field also supports an ``array `` and ``string `` as valid ``input `` option
84
- values.
105
+ Assuming you're using jQuery, you can initialize the date picker via:
106
+
107
+ .. code-block :: html
108
+
109
+ <script >
110
+ $ (document ).ready (function () {
111
+ $ (' .js-datepicker' ).datepicker ({
112
+ format: ' yyyy-mm-dd'
113
+ });
114
+ });
115
+ </script >
116
+
117
+ This ``format `` key tells the date picker to use the date format that Symfony expects.
118
+ This can be tricky: if the date picker is misconfigured, Symfony won't understand
119
+ the format and will throw a validation error. You can also configure the format
120
+ that Symfony should expect via the `format `_ option.
121
+
122
+ .. caution ::
123
+
124
+ The string used by a JavaScript date picker to describe its format (e.g. ``yyyy-mm-dd ``)
125
+ may not match the string that Symfony uses (e.g. ``yyyy-MM-dd ``). This is because
126
+ different libraries use different formatting rules to describe the date format.
127
+ Be aware of this - it can be tricky to make the formats truly match!
85
128
86
129
Field Options
87
130
-------------
@@ -185,3 +228,5 @@ Field Variables
185
228
+--------------+------------+----------------------------------------------------------------------+
186
229
| date_pattern | ``string `` | A string with the date format to use. |
187
230
+--------------+------------+----------------------------------------------------------------------+
231
+
232
+ .. _`Bootstrap Datepicker` : https://github.com/eternicode/bootstrap-datepicker
0 commit comments