时间戳

首页 > 解决方案 > 日历禁用带有来自 XSODATA 绑定 SAPUI5 的数据的日期

javascript - 日历禁用带有来自 XSODATA 绑定 SAPUI5 的数据的日期

问题描述

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

我有一张包含用户、部门和访问日期的表格。

我正在尝试将我的日历绑定在view.xmliesap.ui.unified.Calendar 中并禁用日期，从 HANA 访问日期中检索数据并禁用存储在数据库中的日历上的日期

例如 ; 我有表访问：user1 department2 2018-08-13; 用户 2 部门 2 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>

在此先感谢，我这几天一直在尝试解决这个问题

标签： javascriptodatasapui5hana

解决方案

通过使用绑定来连接数据（模型）和视图，您将朝着正确的方向前进。不过，您手动创建一个（本地）json 视图。尝试将其连接到来自后端的模型（在您的情况下为 xsodata）

  1. 您需要提供数据。例如 Odata Entity Visit，每个条目如下所示：

    姓名：User1（Edm.String 类型）部门：dep2（Edm.String 类型） DateOfVisit：2018-08-13（Edm.DateTime 类型）

  2. 假设 OData 模型VisitModel由该 odata 服务提供服务

  3. 像这样绑定视图：

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

（如果您有StartDateOfVisitandEndDateOfVisit在您的实体上，您可能希望在 DateRange 对象上使用startDateand ）endDate

更新：禁用整周，使用

<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
},
...

推荐阅读