0

I would like to show just the date and not the time in my columns with this component :

Magento\Ui\Component\Listing\Columns\Date

Thanks

3

In grid xml file add code like

<column name="date_from" class="Namespace\Module\Ui\Component\Listing\Column\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/column</item>
              <item name="dataType" xsi:type="string">date</item>
              <item name="label" xsi:type="string" translate="true">Date</item>
              <item name="sortOrder" xsi:type="number">50</item>
          </item>
      </argument>
</column>

create new file Namespace/Module/Ui/Component/Listing/Column/Date.php

<?php 

namespace Namespace\Module\Ui\Component\Listing\Column;

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

/**
 * Class Date.
 */
class Date extends Column
{
    /**
     * @var TimezoneInterface
     */
    protected $timezone;

    /**
     * @param ContextInterface   $context
     * @param UiComponentFactory $uiComponentFactory
     * @param TimezoneInterface  $timezone
     * @param array              $components
     * @param array              $data
     */
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        TimezoneInterface $timezone,
        array $components = [],
        array $data = []
    ) {
        $this->timezone = $timezone;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }

   /**
    * @param array $dataSource
    *
    * @return array
    */
   public function prepareDataSource(array $dataSource)
   {
       if (isset($dataSource['data']['items'])) {
           foreach ($dataSource['data']['items'] as &$item) {
               $item[$this->getData('name')] = $this->prepareItem($item);
           }
       }

       return $dataSource;
   }

    protected function prepareItem(array $item)
    {
        $content = '';
        $date = $item[$this->getData('name')];

        if (empty($date)) {
            return '';
        }

        $content .= date_format(date_create($date), 'M d,Y');

        return $content;
    }
}

You can set date format in this file.

0

Proper way is to set showsTime to false.

    <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</item>
                <item name="sortOrder" xsi:type="number">100</item>
                <item name="dateFormat" xsi:type="string">dd/MM/y HH:MM</item>
                <item name="timeFormat" xsi:type="string">HH:MM</item>
                <item name="showsTime" xsi:type="boolean">false</item>
            </item>
        </argument>
    </column>
0

This might be the easiest way to hide the time part - by defining 'dateFormat' item value:

<?xml version="1.0"?>
<listing>
    ...
    <columns>
        ...
        <column name="date" 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">Release Date</item>
                    <item name="visible" xsi:type="boolean">false</item>
                    <item name="dateFormat" xsi:type="string">d. MMMM, Y</item>
                </item>
            </argument>
        </column>
        ...
    </columns>
    ...
</listing>

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.