Date Filter in sapui5

Question

I have used two date controls to filter a row repeater as,

                oF_cell5 = new sap.ui.commons.layout.MatrixLayoutCell({id:"F05",colSpan : 2});
                var oCreateFrom = new sap.ui.commons.DatePicker("EV_AE_DATE1",
                        {width:"150px",placeholder:"Created From",

                            change:function(oEvent){
                                 oController.onChangeFilterValue(oEvent);}

                        })

                oF_cell51 = new sap.ui.commons.layout.MatrixLayoutCell({id:"F051",colSpan : 2});
                var oCreateTill = new sap.ui.commons.DatePicker("EV_AE_DATE2",
                        {width:"150px",placeholder:"Created Till",

                        change:function(oEvent){
                            oController.onChangeFilterValue(oEvent);}
                        });

Now i have a rowrepeater in which one of the column is CreatedOn date like..,,

                  new sap.m.HBox({
                   items:[new sap.ui.commons.TextView({text:"Created on:"}),
                          new sap.ui.commons.TextView("TV11")
                            .bindProperty("text",
                                    {
                                path: "CM_EventList>CREATEDON",
                                type: new sap.ui.model.type.Date({pattern:"MMM dd, yyyy",
                                    source : {pattern : "dd.MM.yyyy"}})
                       })]
                   }),

And in the controller i have written this code as....,,

                     onInit: function() {

    var model = new sap.ui.model.json.JSONModel("eventlist.json");
    model.setData();
    sap.ui.getCore().setModel(model,"CM_EventList");

                     },


                   onChangeCmFilterValue : function(oEvent){


     var CM_FDATEVAL = sap.ui.getCore().byId("EV_AE_DATE1").getValue();
     var CM_TDATEVAL = sap.ui.getCore().byId("EV_AE_DATE2").getValue();

     var CM_Date = new sap.ui.model.Filter('CM_EventList>CREATEDON',
             sap.ui.model.FilterOperator.BT,CM_FDATEVAL,CM_TDATEVAL);


     var oCM_VBOX1 = sap.ui.getCore().byId("EV_CM_VBOX");
     var oCM_RR1 = sap.ui.getCore().byId("EV_AE_ROWREPEATER");

     oCM_RR1.bindRows('CM_EventList>/eventlist',oCM_VBOX1,null,[CM_Date]);

     },

And the eventlist is my seperate json file which has date values as

                             {
                 "eventlist": [
                       {

                 "CREATEDON": "10.07.2014",
                        },
                       {

                 "CREATEDON": "10.08.2014",
                        },
                        .......
                         and so on..........

Now if select a date range from my date controls then the row repeater should show the records which are between the range of dates as in my json.

But the filter is not working. Please Help me on this.

Thanks Sathish

hi i have mentioned the code as in my view and in my controller ..... @Evgeniy — sathish

Philipp Philipp · Accepted Answer · 2018-08-17T15:34:46

First of all, use the DatePicker Control for date fields in your view if you aren't using it already.

You can obtain the value of your date picker as a Date object using the method GetDateValue(). You can then use these date objects to create a filter for a datetime field of your data model.

var dateFrom = this.getView().byId("filterDateFrom").getDateValue();
var dateTo = this.getView().byId("filterDateTo").getDateValue();

if (dateFrom != null && dateTo != null) {
    filter = new sap.ui.model.Filter(
        "CM_EventList>CREATEDON", 
        sap.ui.model.FilterOperator.BT, 
        dateFrom,
        dateTo
    );
}

By the way: Note that both date objects will actually represent the moment at the beginning of the day (0:00:00) while the timestamps in your database will often be some point in time throughout the day. So when you want to search between two dates inclusively, you need to add one day to dateTo:

dateTo.setDate(dateTo.getDate() + 1);

Another problem you might or might not have to deal with are timezones... and of course all the other falsehoods programmers believe about time.

Date Filter in sapui5

2 Answers

Edit: to use Date as filter