Bind selectedDates Aggregation for Calendar

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/48047896/bind-selecteddates-aggregation-for-calendar

标签

sapui5