Today and Clear buttons on date filter

[anichifor3pgParticipant]

Hi,

I’m trying to figure out how to add the “Today” and “Clear” buttons on the date input like in your example here:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/datefilter.htm?light
My date picker looks like in this example (the order date filter):
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/initialfilter.htm?light
I’ve looked at your code for both and I cannot figure out the difference. It seems that in both cases you are just setting filtertype: ‘date’ and the widget appears in one case with the buttons and in another case without them.
I noticed that in the first example you are using filter row and I was wondering if I can have those buttons when using just the filter menu.
Thank you!

[svetoslav_borislavovParticipant]

Hi,

You may do this with the ‘columnmenuopening’ callback,
please see the following example: https://jsfiddle.net/xo64wg5n/5/

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[anichifor3pgParticipant]

That worked perfectly, thanks!
If anyone else needs this, I replaced the hardcoded datafield name with this:

function columnMenuOpening(menu, datafield, height) {
let dateDatafields = columns.filter(column => column.filtertype === ‘date’).map(column => column.datafield)
if (dateDatafields.indexOf(datafield) > -1) {
displayDatePickerButtons();
}
}

function displayDatePickerButtons() {
const dateTimeInputs = Array.from(document.querySelectorAll(‘div.filter div.jqx-datetimeinput’));
dateTimeInputs.forEach(e => {
const showFooter = $(#${e.id}).jqxDateTimeInput(‘showFooter’);
if (!showFooter) {
$(#${e.id}).jqxDateTimeInput({
showFooter: true
});
}
})
}

[Author]

Posts