9

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
11

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>
| improve this answer | |
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>
| improve this answer | |
  • i want to display only the date using modifier, but it is not working – Jaisa Apr 9 at 10:15
  • <item name="dateFormat" xsi:type="string" translate="true">YYYY-MM-dd</item> Did you try with above line of code? – Ashish Raj Apr 9 at 11:57

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.