日历禁用日期与来自XSODATA绑定SAPUI5的数据

时间:2018-10-21 20:31:52

标签: javascript odata sapui5 hana

我使用XSODATA服务设置了HANA ddbb,并且能够正确使用聚合绑定来显示数据。

我有一张桌子,上面有用户,部门和访问日期。

我试图将日历绑定到view.xmlsap.ui.unified.Calendar中,并禁用日期,从HANA访问日期中检索数据,并禁用数据库中存储的日历中的日期

例如;我有表Visits with:user1 department2 2018-08-13;                                          user2 department2 2018-09-21;

我想禁用那些特定的日期和相应的星期(我将在确定如何做某天之后,稍后再进行一周的工作)

是否可以使用odata禁用日期并通过控制器进行操作来获取该数据?

还是还有另一种更简单的方法?目前,我只能对其进行硬编码

        ((controller.js))
          disableDate:function(){
            var oModel2 = new JSONModel("DisableDate");
            oModel2.setData({
            minDate: new Date(2018, 0, 1), 
            maxDate: new Date(2050, 11, 31),
            disabled: [{start: new Date(2018, 0, 4), end: new Date(2018, 0, 18)},
                       {start: new Date(2016, 0, 15)}
                       ]
             //change this last part to variables  start and end dates and add info            

        });

this.getView().setModel(oModel2, "DisableDate") ;


                ((in xml.view)
                <u:Calendar
                id="calendar"
                select="handleCalendarSelect"
                minDate="{path: 'DisableDate>/minDate'}"
                maxDate="{path: 'DisableDate>/maxDate'}"
                disabledDates="{path: 'DisableDate>/disabled'}">
                <u:disabledDates>
                    <u:DateRange
                        startDate="{DisableDate>start}"
                        endDate="{DisableDate>end}"/>
                </u:disabledDates>
             </u:Calendar>

谢谢,我已经尝试了几天了

1 个答案:

答案 0 :(得分:0)

通过使用绑定来连接数据(模型)和视图,您将朝着正确的方向前进。您可以手动创建(本地)json视图。尝试将其连接到来自后端的模型(您的情况下为xsodata)

  1. 您需要提供数据。例如,Odata实体Visit,每个条目如下所示:

    名称:User1(类型Edm.String) 部门:dep2(类型为Edm.String) DateOfVisit:2018年8月13日(类型为Edm.DateTime)

  2. 假定此odata服务提供OData模型VisitModel

  3. 像这样绑定视图:

<u:Calendar
     ...
     disabledDates="{VisitModel>/VisitSet}">
     <u:disabledDates>
          <u:DateRange startDate="{VisitModel>DateOfVisit}" />
     </u:disabledDates>
</u:Calendar>

(如果您的实体上有StartDateOfVisitEndDateOfVisit,则可能要在DateRange对象上使用startDateendDate

更新:要禁用整周,请使用

<u:Calendar
     ...
     disabledDates="{VisitModel>/VisitSet}">
     <u:disabledDates>
          <u:DateRange 
              startDate="{path: 'VisitModel>DateOfVisit', formatter: '.formatStartOfWeek'}" 
              endDate="{path: 'VisitModel>DateOfVisit', formatter: '.formatEndOfWeek'}" 
          />
     </u:disabledDates>
</u:Calendar>

和您的控制器中

...
formatStartOfWeek: function(oDate) {
    if (oDate && oDate.getTime) {
        // compute Monday
        return new Date(oDate.getTime() - (oDate.getDay()-1)*24*60*60*1000 );
    } else {
        return oDate;
    }
},
formatEndOfWeek: function(oDate) {
    // compute and return Sunday
},
...