Using the datepicker plugin
Overview
To provide an input field for date and time values, you can use the datepicker plugin. This guide shows you how to use it.
The datepicker plugin uses the
flatpickr implementation under the hood. So, check out the flatpickr documentation, if you need more information about the date picker configuration itself.flatpickr
Prerequisites
You won't learn how to create a plugin in this guide, head over to our Plugin base guide to create your first plugin:
You should also know how to customize templates:
Setup a datepicker input field
To apply the datepicker functionality we have to add a DOM element in a template, e.g. an input field. To keep this example simple for now we just override the
base_main_inner block of the storefront/page/content/index.html.twig template.<plugin root>/src/Resources/views/storefront/page/content/index.html.twig
1
{% sw_extends '@Storefront/storefront/page/content/index.html.twig' %}
2
​
3
{% block base_main_inner %}
4
<label>
5
<input type="text"
6
name="customDate"
7
class="customDate"
8
/>
9
</label>
10
​
11
{{ parent() }}
12
{% endblock %}
Copied!
Now you should see an empty input field if you open the storefront in your browser. We need to add the data-attribute
data-date-picker to activate the datepicker plugin on our input field.<plugin root>/src/Resources/views/storefront/page/content/index.html.twig
1
{% sw_extends '@Storefront/storefront/page/content/index.html.twig' %}
2
​
3
{% block base_main_inner %}
4
<label>
5
<input type="text"
6
name="customDate"
7
class="customDate"
8
data-date-picker
9
/>
10
</label>
11
​
12
{{ parent() }}
13
{% endblock %}
Copied!
If we check the change in the browser again, thus after reloading the page, we can see that the datepicker plugin is now active on this element.
Configure the datepicker
If you select a date with the datepicker from the example above, you will see that a time is always selected and displayed in the input field. By default, the time selection is activated.
We can change this behaviour by passing more options to the datepicker plugin.
Here you can see how this is done by setting up a local Twig variable
pickerOptions. We can assign a JSON formatted object to the variable and pass the value to the datepicker plugin through the data-date-picker-options attribute.<plugin root>/src/Resources/views/storefront/page/content/index.html.twig
1
{% sw_extends '@Storefront/storefront/page/content/index.html.twig' %}
2
​
3
{% block base_main_inner %}
4
​
5
{% set pickerOptions = {
6
locale: app.request.locale,
7
enableTime: true
8
} %}
9
10
<label>
11
<input type="text"
12
name="customDate"
13
class="customDate"
14
data-date-picker
15
data-date-picker-options="{{ pickerOptions|json_encode|escape('html_attr') }}"
16
/>
17
</label>
18
​
19
{{ parent() }}
20
{% endblock %}
Copied!
As you can see, we also pass in the
locale option which gets its value from app.request.locale. As a result, the datepicker plugin now uses the same locale as the current storefront and the date formatting matches active languages accordingly.Preselect a date
To preselect the value of the datepicker we can simply set its value in the input field which gets picked up by the datepicker plugin.
<plugin root>/src/Resources/views/storefront/page/content/index.html.twig
1
{% sw_extends '@Storefront/storefront/page/content/index.html.twig' %}
2
​
3
{% block base_main_inner %}
4
​
5
{% set pickerOptions = {
6
locale: app.request.locale,
7
enableTime: true
8
} %}
9
10
<label>
11
<input type="text"
12
name="customDate"
13
class="customDate"
14
value="2021-01-01T00:00:00+00:00"
15
data-date-picker
16
data-date-picker-options="{{ pickerOptions|json_encode|escape('html_attr') }}"
17
/>
18
</label>
19
​
20
{{ parent() }}
21
{% endblock %}
Copied!
Controlling the datepicker via buttons
To open or close the datepicker by trigger buttons you can pass in DOM selectors. You can also setup a selector to reset the currently selected value. Here is an example which shows all three selectors in action.
<plugin root>/src/Resources/views/storefront/page/content/index.html.twig
1
{% sw_extends '@Storefront/storefront/page/content/index.html.twig' %}
2
​
3
{% block base_main_inner %}
4
​
5
{% set pickerProperties = {
6
locale: app.request.locale,
7
enableTime: true,
8
selectors: {
9
openButton: ".openDatePicker",
10
closeButton: ".closeDatePicker",
11
clearButton: ".resetDatePicker"
12
}
13
} %}
14
​
15
<label>
16
<input type="text"
17
name="foo"
18
class="customDate"
19
value="2021-04-13T00:00:00+00:00"
20
data-date-picker
21
data-date-picker-options="{{ pickerProperties|json_encode|escape('html_attr') }}"
22
/>
23
​
24
<button class="openDatePicker">Open</button>
25
<button class="closeDatePicker">Close</button>
26
<button class="resetDatePicker">Reset</button>
27
</label>
28
​
29
{{ parent() }}
30
{% endblock %}
Copied!
More options
Option
Default
Description
dateFormat'Y-m-dTH:i:S+00:00'
Pattern for the date string representation
altInputtrue
Hides your original input and creates a new one.
altFormat'j. FY, H:i'
Alternative pattern for the date string representation if
altInput is enabled. The value of the input field gets still formatted by dateFormattime_24hrtrue
​
enableTimetrue
​
noCalendarfalse
​
weekNumberstrue
​
allowInputtrue
​
minDatenull
Specifies the minimum/earliest date (inclusively) allowed for selection
maxDatenull
Specifies the maximum/latest date (inclusively) allowed for selection.
Last modified 18d ago