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