Magento 2 add custom filter to grid for date

Question

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?

Answer 1

I resolved this somehow, I added a dropdown with same details as needed and then used jquery to make changes to input field and it works fine.

In my module I added a file requirejs-config.js and write the below code:-

var config = {
    map: {
        '*': {
            'Magento_Ui/js/form/components/group':
            'Namespace_Salesperson/js/form/components/group',
        }
  }
};

I modified group js file in my module then to call my custom html file groupdt.html Just modify the initialize function:-

initialize: function () {
            this._super()
                ._setClasses();

                if(this.index == 'salesperson_createddt') {

                        this.template = 'Namespace_Salesperson/group/groupdt';
                }

            return this;
        },

Then I added below html in my groupdt.html file

<legend class="admin__form-field-legend">
    <span text="label"/>
</legend>
<div class="admin__form-field" outereach="elems" render=""/>

<div class="salesperson_createddt" style="margin-left:67px;">
    <select id="salesperson_createddt">
    <option value="none"></option>
    <option value="today">Today</option>
    <option value="yesterday">Yesterday</option>
    <option value="this_week">This Week</option>
    <option value="last_week">Last Week</option>
    <option value="this_month">This Month</option>
    <option value="last_month">Last Month</option>
    <option value="last_month_2">Last 2 Months</option>
    <option value="ytd">YTD</option>
    </select>
</div>

After this i write below jquery to make the dropdown work and set value to input.

require(['jquery', 'jquery/ui'], function ($) {

    $(document).on('change', '#salesperson_createddt', function () {
        rangeSelect($(this).val(), "salesperson_createddt[from]", "salesperson_createddt[to]");
        $("input[name='salesperson_createddt[from]']").trigger('change');
        $("input[name='salesperson_createddt[to]']").trigger('change');
    });
    function rangeSelect(value, from, to) {
        from = "input[name='" + from + "']";
        to = "input[name='" + to + "']";

        if (value == "today") {
            var today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth() + 1; //January is 0!
            var yyyy = today.getFullYear();
            today = mm + "/" + dd + "/" + yyyy;

            $(from).val(today);
            $(to).val(today);
        } else if (value == "yesterday") {
            var today = new Date();
            var dd = today.getDate() - 1;
            var mm = today.getMonth() + 1; //January is 0!
            var yyyy = today.getFullYear();
            today = mm + "/" + dd + "/" + yyyy;

            $(from).val(today);
            $(to).val(today);
        } else if (value == "this_week") {
            var curr = new Date();
            var firstDay = new Date(curr.setDate(curr.getDate() - curr.getDay()));
            var lastDay = new Date(curr.setDate(curr.getDate() - curr.getDay() + 6));

            firstDay = (firstDay.getMonth() + 1) + "/" + (firstDay.getDate()) + "/" + firstDay.getFullYear();
            lastDay = (lastDay.getMonth() + 1) + "/" + (lastDay.getDate()) + "/" + lastDay.getFullYear();

            $(from).val(firstDay);
            $(to).val(lastDay);
        } else if (value == "last_week") {
            var curr = new Date();
            var firstDay = new Date(curr.setDate(curr.getDate() - curr.getDay() - 6));
            var lastDay = new Date(curr.setDate(curr.getDate() - curr.getDay() + 6));

            firstDay = (firstDay.getMonth() + 1) + "/" + (firstDay.getDate()) + "/" + firstDay.getFullYear();
            lastDay = (lastDay.getMonth() + 1) + "/" + (lastDay.getDate()) + "/" + lastDay.getFullYear();

            $(from).val(firstDay);
            $(to).val(lastDay);
        } else if (value == "this_month") {
            var date = new Date(), y = date.getFullYear(), m = date.getMonth() + 1;
            var firstDay = m + "/" + 1 + "/" + y;
            var lastDay = new Date(y, m, 0);
            var lastDayWithSlashes = (lastDay.getMonth() + 1) + "/" + (lastDay.getDate()) + "/" + lastDay.getFullYear();

            $(from).val(firstDay);
            $(to).val(lastDayWithSlashes);
        } else if (value == "last_month") {
            var date = new Date(), y = date.getFullYear(), m = date.getMonth();
            var firstDay = m + "/" + 1 + "/" + y;
            var lastDay = new Date(y, m, 0);
            var lastDayWithSlashes = (lastDay.getMonth() + 1) + "/" + (lastDay.getDate()) + "/" + lastDay.getFullYear();
            $(from).val(firstDay);
            $(to).val(lastDayWithSlashes);
        } else if (value == "last_month_2") {
            var date = new Date(), y = date.getFullYear(), m = date.getMonth() - 1;
            var firstDay = m + "/" + 1 + "/" + y;
            var lastDay = new Date(y, m + 1, 0);
            var lastDayWithSlashes = (lastDay.getMonth() + 1) + "/" + (lastDay.getDate()) + "/" + lastDay.getFullYear();
            $(from).val(firstDay);
            $(to).val(lastDayWithSlashes);
        } else if (value == "ytd") {
            $(from).val("");
            $(to).val("");
        } else {
            document.getElementById(from).value = "";
            document.getElementById(to).value = "";
            $(from).val("");
            $(to).val("");
        }
    }
});

Answer 2

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: