CODEWITHSUNDEEP
sapui5
user2644620
user2644620

Reputation: 199

SAP UI5 filtering the table rows within the date range

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

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

Upvotes: 0

Views: 6303

Answers (1)

Andrew Naumovich
Andrew Naumovich

Reputation: 1450

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:

  1. Bind the DatePicker to the local JSON model and by pressing on "Display" just get it through getProperty method.
  2. 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.

Upvotes: 0

Related Questions