You are reading the documentation for version 2.2. Magento 2.3 is the latest version available. Ensure you are reading the documentation for your version of Magento.

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

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
<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>
            </settings>
        </column>
        ...
    </columns>
    ...
</listing>

Result

DateColumn Component Example