8

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

default time format

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.

enter image description here

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

  • Since you have any questions, feel free to contact me. I’ll try to help you. – Siarhey Uchukhlebau Dec 5 '17 at 12:45
  • @SiarheyUchukhlebau Thank you very much :) Your answer is already working, accept and up vote. – Key Shang Dec 6 '17 at 3:27
10

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>
5

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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