Magento 2: how should I display only date in grid

Question

How should I hide the time in this grid? I only want date to display but the time field is also coming like 13/03/2018 00:00:00

In my .xml file, this column is responsible for displaying date column:

 <block class="Magento\Backend\Block\Widget\Grid\Column" as="date">
   <arguments>
     <argument name="header" xsi:type="string" translate="true">Date</argument>
     <argument name="index" xsi:type="string">date</argument>
   </arguments>
</block>

Answer 1

Did you try following?

<block class="Magento\Backend\Block\Widget\Grid\Column" as="date">
<arguments>
    <argument name="header" xsi:type="string" translate="true">Date</argument>
    <argument name="index" xsi:type="string">date</argument>
    <argument name="options" xsi:type="array">
        <argument name="showsTime" xsi:type="boolean">false</argument>
    </argument>
</arguments>

Answer 2

The best solution to hide time for date column in UI component. For this, you need to provide the date format setting without time format as given below in your ui-component.xml file

<column name="salesperson_createddate" class="Magento\Ui\Component\Listing\Columns\Date" >
<argument name="data" xsi:type="array">
  <item name="config" xsi:type="array">
     <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 Date</item>
     <item name="dateFormat" xsi:type="string">M d, Y</item>
  </item>

Answer 3

By default, the date component prints out in the following formart "MMM d, YYYY h:mm:ss A". To change it, use the item "dateFormat" with the value "dd/MM/YYYY" to show the date as 01/11/1999, for instance.

    <column name="updated_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">Updated At</item>
                <item name="dateFormat" xsi:type="string">dd/MM/YYYY</item>
            </item>
        </argument>
    </column>

Answer 4

<block class="Magento\Backend\Block\Widget\Grid\Column" as="date">
  <arguments>
    <argument name="header" xsi:type="string" translate="true">Due Date</argument>
    <argument name="index" xsi:type="string">date</argument>
    <argument name="type" xsi:type="string">datetime</argument>                            
  </arguments>
</block>