Changing time / date format on order grid (or all grids)?

Question

I found no way so far to change the date / time format on the order grid (or even better all grids where its relevant). I guess some XML magic is required here.

Please take a look at https://prnt.sc/pmyywc for details.

Can anyone help here?

Magento 2.2.3

Answer 1

You just need to refer https://devdocs.magento.com/guides/v2.4/ui_comp_guide/components/ui-datecolumn.html

And add component="Magento_Ui/js/grid/columns/date" in the column node.

<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>
            <dateFormat>yyyy-MM-dd</dateFormat>
            <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>
...

Answer 2

You can use class in your column field in your ui_component XML file like below..

In your case, you can override your sales_order_grid.xml in your custom module or custom theme and you can change column class for date.

<column name="date" class="Vendor\Module\Ui\Component\Listing\Column\Date">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Date</item>
        </item>
    </argument>
</column>

And then you need to create UI component class for it. You can create that on below path..

app/code/Vendor/Module/Ui/Component/Listing/Column/Date.php

Content for this file is ..

<?php
namespace Vendor\Module\Ui\Component\Listing\Column;

use Magento\Ui\Component\Listing\Columns\Column;

class Date extends Column
{
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as & $item) {
                if ($this->getData('name') == 'date') {
                   $item[$this->getData('name')] = date("d.m.Y H:i:s")." Uhr";
                }
            }
        }

        return $dataSource;
    }
}

Output :

Hope this will help you!

Answer 3

copy vendor/magento/module-ui/view/base/web/js/grid/columns/date.js and place it in your theme with module name "Magento_Ui"

change default dateFormat:

return Column.extend({
        defaults: {
            dateFormat: 'dd-mm-YYYY h:mm:ss A'  //Updated for change date formate 
        },

        /**
         * Overrides base method to normalize date format.
         *
         * @returns {DateColumn} Chainable.
         */
        initConfig: function () {
            this._super();

            this.dateFormat = utils.normalizeDate(this.dateFormat);

            return this;
        },

        /**
         * Formats incoming date based on the 'dateFormat' property.
         *
         * @returns {String} Formatted date.
         */
        getLabel: function (value, format) {
            var date = moment(this._super());

            date = date.isValid() && value[this.index] ?
                date.format(format || this.dateFormat) :
                '';

            return date;
        }
    });

Note: you have to place in theme with same path