PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. We
strongly recommend planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.
DateColumn component
The DateColumn component implements a table column that displays dates.
Configuration options
| Option | Description | Type | Default |
|---|---|---|---|
dateFormat |
Date format for the displayed column’s values. | String | MMM d, YYYY h:mm:ss A |
skipTimeZoneConversion |
Converts the given date to default (UTC) timezone. | Boolean | true |
timezone |
Enables date conversion based on the timezone configuration. | Boolean | true |
Source files
Extends Column:
Examples
Integrate the DateColumn component with the Listing component
This is an example of how the DateColumn component integrates with the Listing component:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<listing>
...
<columns>
<column name="date_column_example_1" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
<settings>
<filter>dateRange</filter>
<dataType>date</dataType>
<dataType>date</dataType>
<label translate="true">Date Column Example 1</label>
</settings>
</column>
<column name="date_column_example_2" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
<settings>
<filter>dateRange</filter>
<dataType>date</dataType>
<dateFormat>yyyy-MM-dd hh:mm:ss</dateFormat>
<label translate="true">Date Column Example 2</label>
<timezone>false</timezone>
</settings>
</column>
...
</columns>
...
</listing>
Result
