6

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

  • 1
    Would you like to add simple date filer or customized date range as per the above image? – Maniprakash Chinnasamy Aug 29 '17 at 12:20
  • 1
    I need exactly similar filter and have created my grid using UI component. – arushi Aug 29 '17 at 12:38
0

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

  • 1
    I know well about daterange, my question is how to show dropdown rather than date range. – arushi Sep 5 '17 at 9:09
  • 1
    @price Surely this might help but using the title which i posted no one will be expecting a default magento functionality related answer. Moreover this does not show that any efforts are been made to provide an answer to the question i asked. We post query on stackoverflow after some research and the answer u gave is very easily available and ofcourse your answer clearly shows that you did not even thought to read a question or title it clearly mention about custom filter, date dropdown. – arushi Sep 5 '17 at 9:30
0

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("");
        }
    }
});

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.