Columns Date Ui_compoennt remove time

Question

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

Answer 1

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.

Answer 2

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>

Answer 3

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>