Bind selectedDates Aggregation for Calendar

2019-06-06 18:43发布

站内问答 / 前端开发
863 1 4

I tried to bind an array of dates to sap.ui.unified.Calendar but without success. I am sure I am not far from the solution.

Here is the code:

var oCal = new sap.ui.unified.Calendar();
var oModel2 = new sap.ui.model.json.JSONModel([
    {myDate: new Date("2018-01-10"), tt:""},
    {myDate: new Date("2018-01-11"), tt:""},
    {myDate: new Date("2018-01-12"), tt:""},
]);
sap.ui.getCore().setModel(oModel, "MyData3");
var oItemTemplate = new sap.ui.unified.DateRange({
    startDate: "{MyData3>myDate}",
    endDate: "{MyData3>myDate}"
});     
oCal.bindAggregation("selectedDates", "MyData3>/", oItemTemplate);

I don't get any exception. The model has the data filled with 3 objects of type Date but I do not have those 3 dates pre-selected in the calendar.

If I fill the selectedDates aggregation manually (without binding) it will select those 3 dates.

标签： sapui5
举报
1条回答
太酷不给撩
2楼-- · 2019-06-06 19:27

Here is a working minimal example:

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/unified/Calendar",
  "sap/ui/unified/DateRange",
  "sap/ui/model/json/JSONModel",
], (Calendar, DateRange, JSONModel) => new Calendar({
  singleSelection: false
}).bindAggregation("selectedDates", {
  path: "MyData3>/",
  template: new DateRange({
    startDate: "{MyData3>myDate}",
    endDate: "{MyData3>myDate}",
  }),
}).setModel(new JSONModel([
  {myDate: new Date("2018-01-10")},
  {myDate: new Date("2018-01-11")},
  {myDate: new Date("2018-01-13")},
]), "MyData3").placeAt("content")));
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap"
  data-sap-ui-libs="sap.ui.unified"
  data-sap-ui-preload="async"
  data-sap-ui-theme="sap_belize"
  data-sap-ui-compatVersion="edge"
></script><body id="content" class="sapUiBody sapUiSizeCompact"></body>

I assume the provided code in your question is not a real excerpt from your project. Otherwise, you'd have got a ReferenceError saying that the variable oModel is undefined (instead, oModel2 is defined). Apart from this, the actual reason why the binding did not work must be because the model is set on the core while the Calendar control is a descendant of ComponentContainer. In that case, the Core model won't be propagated to the Component.

--> Avoid setting models on the Core if the app is component-based.

If not already done: In order to display multiple selected dates in the first place, the Calendar property singleSelection has to be disabled explicitly since it's enabled by default.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)