Date Filter in toolbar

[limosys]

I want to filter the date column and I want to enter the date ranges in the toolbar. All the code examples I found online only explain how do this by using the column header.
Could you point me in the right direction.

Thanks
 

[paramvir]

This one is example of toolbar filtering with filter method

https://paramquery.com/pro/demos/filter_local

https://paramquery.com/pro/api#method-filter

For date range, condition: "between" is required and 2 input fields required in the toolbar.

[limosys]

Thanks for the reply. I have managed to set up the filter but I was not able to get the datepicker to work.
I am adding custom code into the type to render a pair of textboxes for the 'to' and 'from' date.

The accountAndDateFilter function is where all the filtering happens.

I also made a type: "textbox" feild in the toolbar and assigned it the datepicker through init like in the local date filter demo.
That did not seem to work either.

As a control, I made a textbox outside the grid and assigned it a datepicker and that seem to work just fine.

Note: I am filtering locally.

Code: [Select]

//Custom HTML
var date_range_button1 =
'<input id="fromDate1" type="text" onchange="accountAndDateFilter()" class="hasDatepicker"> — <input id="toDate1" type="text" onchange="accountAndDateFilter()" class="hasDatepicker">';

//Entry in the toolbar
items: [{
type: date_range_button1 ,
}

//Executed after the grid has been initilized
$("#fromDate1").datepicker();
$("#toDate1").datepicker();


[paramvir]

you are not supposed to add class="hasDatepicker", it's added by datepicker after initialization.

Works fine without that class.

https://plnkr.co/edit/6he6aJ8Or6rZAfHxZxUX?p=preview