Author Topic: Date Filter in toolbar  (Read 2957 times)

limosys

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 4
    • View Profile
Date Filter in toolbar
« on: February 28, 2018, 04:18:46 am »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6297
    • View Profile
Re: Date Filter in toolbar
« Reply #1 on: February 28, 2018, 04:51:51 pm »
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

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 4
    • View Profile
Re: Date Filter in toolbar
« Reply #2 on: March 01, 2018, 03:26:41 am »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6297
    • View Profile
Re: Date Filter in toolbar
« Reply #3 on: March 01, 2018, 05:13:07 pm »
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