PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. You may want to consider 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

DateColumn Component Example