Datetime Range picker on the filters of the created_at column in the sales order grid - magento 2.4.5-p3

Question

I have a problem with changing the default date range picker to the date time range picker widget in the sales order grid.

I have done the following:

created the necessary registration.php and module.xml files

registration.php:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'FunC_OrderGridTimeFilter',
    __DIR__
);

module.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="FunC_OrderGridTimeFilter">
        <sequence>
            <module name="Magento_Sales"/>
        </sequence>
    </module>
</config>

and I have added a sales_order_grid.xml file under FunC/OrderGridTimeFilter/viwe/adminhtml/ui_component with the following contents:

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="sales_order_columns">
        <column name="created_at">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">datetimeRange</item>
                    <item name="dataType" xsi:type="string">date</item>
                    <item name="label" xsi:type="string" translate="true">Purchase Date</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

for the value of the filter item i've tried dateRange and dateTimeRange. With both options I don't see any change in the date time picker on the frontend. Changing the label item value does change the label of the column. What am I doing wrong?

Answer 1

Please try following:-

1. Put this to your column definition:

'filter_time' => true,

<item name="filter_time" xsi:type="boolean">true</item>

2. Put this code in xml file.

<item name="options" xsi:type="array"> <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item> <item name="timeFormat" xsi:type="string">HH:mm:ss</item> <item name="showsTime" xsi:type="boolean">true</item> </item>