UI component - display the time to 'Y-m-d H:i:s' format(ISO time format)

Question

I create some admin listing pages by UI component, the default time format in their time column all like below

The UI component codes like below

<column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
    <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">Created At</item>
        </item>
    </argument>
</column>

The time format in database is right(ISO time format), that is what I want to display.

So, how to display the time to "Y-m-d H:i:s" format(ISO time format) in UI component? Thanks for any advice :)

Answer 1

Try to change the dateFormat value of your column:

<column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
    <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">Created At</item>
            <item name="dateFormat" xsi:type="string">Y-MM-dd HH:mm:ss</item>
        </item>
    </argument>
</column>

Default format could be fount inside the Date column component magento/module-ui/view/base/web/js/grid/columns/date.js

return Column.extend({
    defaults: {
        dateFormat: 'MMM d, YYYY h:mm:ss A'
    },
...

Update:

Also, notice the use of the y instead of YYYY for the year. The date component uses the ICU Date Format.

Source

So, format should slightly different. I think this one could be suitable:

<item name="dateFormat" xsi:type="string">Y-MM-dd HH:mm:ss</item>

Answer 2

You need to add date format dateFormat value of the column as YYYY-MM-dd hh:mm:ss, the ICU date time format.

Take a look at below link for more detail:

http://userguide.icu-project.org/formatparse/datetime

M month in year

M 9

MM 09

MMM Sep

MMMM September

MMMMM S

d day in month

dd 02

And YYYY for year

So the date format line of code is:

<item name="dateFormat" xsi:type="string" translate="true">YYYY-MM-dd hh:mm:ss</item>

You can try below code for your date column and data:

<column name="purchase_date" class="Magento\Ui\Component\Listing\Columns\Date">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Created At</item> 
            <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="dateFormat" xsi:type="string" translate="true">YYYY-MM-dd hh:mm a</item>
        </item>
    </argument>
 </column>