Magento 2 add custom filter to grid for date (dropdown with value as today, lastweek)

In this blogpost we will look to customize the date filter to provide it more option:-

So as can be seen in above image we need to add a dropdown for date filter. On selection of any date it will make changes to input box, and we can can filter our data according to date.
To achieve this you need to override Magento_Ui/js/form/components/group.js file
In your module add requirejs-config.js file in view/adminhtml folder and write the below code:-

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

Then add the group.js file in your own module on view\base\web\js\form\components\group.js and make changes in initialize function. You need to add a condition specifically for your field and provide the template to which you want to refer it:-

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

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

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

            return this;
        },

Now add a html file at this <strong>view/base/web/template/group/groupdt.html</strong>

<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>

Now to make dropdown work, i.e, on click of select dropdown, input box should have values according to selection made
Add your JS file path in layout xml file. Below is the code to add in your JS file:-

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("");
        }
    }
});
NOTE:- Replace salesperson_createddt with your field name

Leave a Comment.