SAP UI5 filtering the table rows within the date range

Question

I have a table with list of records (Rows Data fetched from local JSON).

I want to filter the table with "TO" field. If i give the date as Feb 13,2018 and click on "Display" button. Table must filter all the rows which are upto Feb 13,2018. But im not able to achieve this. Can you please help me to solve this? Below is my Code..

XML ::

<DatePicker id="leaveSince" valueFormat="dd-MM-yyyy" class="leaveSinceInput"/>
<Button text="Display" type="Accept" class="sapUiSmallMarginBegin" press="displayTable"></Button>

<Table id="idLeaveTable" inset="true" items="{path: 'overviewModel>/leaveOverview'}">
  <columns>
    <Column>
      <Text text="Type of Leave" />
    </Column>
    <Column minScreenWidth="Tablet" demandPopin="true">
      <Text text="From" />
    </Column>
    <Column minScreenWidth="Tablet">
      <Text text="To" />
    </Column>
    <Column>
      <Text text="Status" />
    </Column>
    <Column minScreenWidth="Tablet" demandPopin="true">
      <Text text="Used" />
    </Column>
  </columns>
  <items>
    <ColumnListItem>
      <cells>
        <Text text="{overviewModel>typeofleave}" />
        <Text text="{overviewModel>from}" />
        <Text text="{overviewModel>to}" />
        <Text text="{overviewModel>status}" />
        <Text text="{overviewModel>used}" />
      </cells>
    </ColumnListItem>
  </items>
</Table>

Controller

displayTable:function(oEvent){
        var leaveSince=this.getView().byId("leaveSince").getValue();        
        var filter = new sap.ui.model.Filter("to", sap.ui.model.FilterOperator.BT, leaveSince);
        var list = this.getView().byId("idLeaveTable");
        var binding = list.getBinding("items");
        binding.filter([filter]);
}

The Value format for the date was dd-MM-yyyy. Can someone please help me to fix my query? Thank you in advance

Thank you for your comment, But Im not expecting the Date Range Selection field. I want to pass the date to the local JSON and i want to filter and display the records in the table based on the date filter. — user3496976
Even if I use LT operator, I'm not getting the correct result set. Here The date which I'm passing from controller to json, local json is not throwing the correct results... I'm not sure how local json will understand the dates.. Please help me — user3496976

Andrii Naumovych Andrii Naumovych · Accepted Answer · 2018-02-11T09:06:25

The problem is that you use DatePicker control as it is (without data binding) and get the value from the input itself (string date value).

But the thing is that Filter object does not understand date strings, it works with the date objects (plain JS date object).

So you your case I see 2 solutions:

Bind the DatePicker to the local JSON model and by pressing on "Display" just get it through getProperty method.
Make use of "getDateValue" metho of DatePicker to fetch the JS date object

After you successfuly got the date object, make use of LT operator in Filter object construction.

I would recommend the 1st variant, because this is more convenient and extensible solution.

SAP UI5 filtering the table rows within the date range

Controller

1 Answers