Create date quickfilter without range.

[sapster77]

Hi,
I am trying to implement a simple datefilter, that uses only a single date and not the range that is supplied when using the normal quickfilter attribute.
I am using this code in my XYZgrid.ts file:

protected createQuickFilters(): void { super.createQuickFilters(); this.addQuickFilter({ type: DateEditor, field: fld.DateAvail }); }
It does, however, error when loading the page:
"Uncaught RangeError: Maximum call stack size exceeded."

The table (MSSQL) is only a int-field and a date-field. I have tried using the same code on several other tables with dates and the same error is always present.
If I try to put the "quickfilter" attribute on the datefield, it generates the date range quickfilter as well as the single filter mentioned above and then it actually works (but now there are 3 filters on the page which I of course dont want:-) ).

My second attempt is shown below (with the quickfilter attribute set on the datefield):
This does sadly still give me a from and to date, but the "from field" is working as expected with filtering on only a single date. I just cant figure out how to hide the "date to" field...
Any suggestions on how to fix either solution 1 or 2 would be highly apprecieated! Thank you for any ideas:-)

`protected getQuickFilters(): QuickFilter<Widget, any>[] {

 //get quick filter list from base class
let filters = super.getQuickFilters();

 //quick filter init method is a good place to set initial
 //value for a quick filter editor, just after it is created
first(filters, x => x.field == fld.DateAvail).init = w => {
    // w is a reference to the editor for this quick filter widget
    // here we cast it to DateEditor, and set its value as date.
    // note that in Javascript, months are 0 based, so date below
    // is actually 2016-05-01
    (w as DateEditor).valueAsDate = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDay());

    // setting start date was simple. but this quick filter is actually
    // a combination of two date editors. to get reference to second one,
    // need to find its next sibling element by its class
    //let endDate = w.element.nextAll(".s-DateEditor").getWidget(DateEditor);
    //endDate.valueAsDate = new Date(new Date().getFullYear(), 10, 1);


    let filter = first(filters, x => x.field == fld.DateAvail);
    // element method in DataGrid turns this into a range editor, clear it to prevent
    filter.element = e => { }
    // need to override handler too, otherwise default handler will try to handle a date range
    filter.handler = h => {
        if (h.active) {
            h.request.EqualityFilter[fld.DateAvail] = h.value;
        }
        else {
            h.request.EqualityFilter[fld.DateAvail] = null;
        }
    }
    

};

return filters;

}`

[LSNicholls]

OK I am sure this is cheating -- but I think I have this working with a CSS Class
(QuickFilter(CssClass ="s-QuickFilterHideDate2")) , like this -- you will have to fix the width to match your requirements:

.s-QuickFilterHideDate2 {
  text-overflow: clip;
  overflow: clip;
  display: inline-flex;
  width: 15em;
}

... the proper alternative would be to create a custom editor, which would probably not be that hard actually, but the above class is Q&D if it doesn't make you gag .

[sapster77]

This works just fine and doesn't make me gag! :-) Thank you very much.