0

I was wondering how can I format a column into a certain date format? Right now I'm getting this format

enter image description here

But what I wanted was something like MM/d/Y format. I already tried this

<column name="created_at">      
  <argument name="data" xsi:type="array">
     <item name="config" xsi:type="array">
        <item name="filter" xsi:type="string">dateRange</item>
        <item name="editor" xsi:type="string">text</item>
        <item name="label" xsi:type="string" translate="true">Order Date</item>
        <item name="sortOrder" xsi:type="number">6</item>
        <item name="dateFormat" xsi:type="string">dd/MM/Y</item>
     </item>
   </argument>
</column>

But it didn't work. Any idea how to fix this?

1 Answer 1

1

you can specify date format by defining in the xml file directly as below.

<column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date" component="Magento_Ui/js/grid/columns/date">
    <settings>
        <filter>dateRange</filter>
        <dataType>date</dataType>
        <label translate="true">Order Date</label>
        <dateFormat>MMMM d, Y</dateFormat><!--  this is the dateformat you can specify -->
    </settings>
</column>

in case if you dynamically show the date format that you can use below also

<column name="created_at" class="Vendor\YourModule\Component\Columns\OrderGrid"> <!-- add your custom class for dateformat -->
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">dateRange</item>
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
            <item name="dataType" xsi:type="string">date</item>
            <item name="label" xsi:type="string" translate="true">Order Date</item>
        </item>
    </argument>
</column>

refer OrderGrid.php

<?php

namespace Vendor\YourModule\Component\Columns;

use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Ui\Component\Listing\Columns\Column;

class OrderGrid extends Column
{
    public function __construct(
        ContextInterface $contextInterface,
        UiComponentFactory $componentFactory,
        array $components = [],
        array $data = []
    ) {
        parent::__construct($contextInterface, $componentFactory, $components, $data);
    }

    public function prepareDataSource(array $dataSource)
    {
        $dateFormat = "dd/MM/Y";

        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as &$item) {
                $date = '';
                if ($item[$this->getData('name')] != '' && $item[$this->getData('name')] != '0000-00-00 00:00:00') {
                    $date = date($dateFormat, strtotime($item[$this->getData('name')]));
                }
                $item[$this->getData('name')] = $date;
            }
        }
        return $dataSource;
    }
}
1
  • How to achieve the same in Grid.php block ?
    – Ravi Soni
    Jun 9, 2022 at 13:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.