Set date format in admin grid

Question

I have create a ui-component grid in magento2 .I need to set the default symbol (if the end date is empty in that field) like -- for End column in grid

<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">From Date</item>
                    </item>
                </argument>
            </column>

OUTPUT:

EXPECTED OUTPUT:

Thanks

Array ( [post_id] => 5
[publish_time] => 2018-11-21 06:13:24 [from_date] => 2018-11-21 05:30:00 [to_date] => -- [is_active] => 1 )

Answer 1

You can change the format of the date. Add this line to your code

<item name="dateFormat" xsi:type="string">Y-MM-dd HH:mm:ss</item>

modify the date format according to you . For more reference check this link UI component - display the time to 'Y-m-d H:i:s' format(ISO time format)

Answer 2

You need to add custom file to add customization :

<column name="date" class="VendorName\ModuleName\Ui\Component\Listing\Column\TestingFile">
    <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="dateFormat" xsi:type="string">Y-MM-dd HH:mm:ss</item>
            <item name="label" xsi:type="string" translate="true">From Date</item>
        </item>
    </argument>
</column>

Create File at VendorName\ModuleName\Ui\Component\Listing\Column\TestingFile.php

<?php

namespace VendorName\ModuleName\Ui\Component\Listing\Column;

use Magento\Ui\Component\Listing\Columns\Column;

class TestingFile extends Column {

    public function __construct(
        \Magento\Framework\View\Element\UiComponent\ContextInterface $context,
        \Magento\Framework\View\Element\UiComponentFactory $uiComponentFactory,
        array $components = [],
        array $data = []
    ) {
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }
    public function prepareDataSource(array $dataSource) {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as $r => $v) {
                if(strtotime($v['date']) < 0){
                    $dataSource['data']['items'][$r]['date'] = "-----";
                } else{
                    $dataSource['data']['items'][$r]['date'] = date('Y-MM-dd HH:mm:ss', strtotime($v['date']));
                }
            }
        }
        return $dataSource;
    }
}