Magento2 – Add Custom Filter to Grid for Date

adminhtmlfiltermagento-2.1.3magento2ui-grid

We have a requirement to add a custom filter for date field. So that we can filter using dateRange filter and also by selecting from a dropdown which has these values (today, this week, tommorow) etc. In Magento 1 we did this by creating custom class but in Magento 2 I am not getting how can I filter my date in such a manner. Below is the image for same. Can anybody suggest me on the same?

enter image description here

Best Answer

Use Magento_Ui/js/grid/columns/date component for date filter in UI grid

<column name="updated_at">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
        </item>
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">dateRange</item>
            <item name="dataType" xsi:type="string">date</item>
            <item name="align" xsi:type="string">left</item>
            <item name="label" xsi:type="string" translate="true">Updated At</item>
        </item>
    </argument>
</column>

Note: Replace updated_at to your column source name

Output:

enter image description here

Related Topic