Sapui5 如何将日历和两个时间选择器正确绑定到sap.m.表？

目前我正在学习SAPUI5，并为自己创建了一个小应用程序，以便在实践中学习。在回答我的问题之前，我将提供一些关于我的应用程序的简短信息，这样你就知道我正在尝试做什么，以及预期的结果

应用程序的功能是什么？

这个应用程序所做的唯一事情就是为用户提供一个日历和一个表。如果用户单击某个日期，则表中应填写此日期和两个时间选择器，以给出所选日期的开始和结束时间。应为每个日期创建一个新行

实际问题：

我想这是一个设计问题。桌子上满是日期和时间选择器，但我这样做的方式是，我想这是一种糟糕的做法。我将所选日期存储在两个模型中，一个用于日历，另一个用于将其绑定到表。有效期和日期已保存，我可以通过模型访问数据。当一个新日期添加到表中时，两个时间选择器也会被添加，因为它们在XML视图的ColumnListItem中提供，但是没有模型绑定到它们，我也无法访问时间选择器的值，例如通过ID。问题是，直到现在，我还没有找到合适的方法来将它们绑定到模型或其他干净的方法，也没有找到访问所创建的计时器值的方法

问题：

您将如何以干净的方式实现这一点，以便时间选择器以正确的方式绑定到一个或多个模型？你可以访问他们的数据吗？如果您能给我一个建议或提示，我应该如何以一种干净的方式实现这一点，我将不胜感激，因为我想从中吸取教训，不想为了在较短的时间内实现目标而开始使用不良做法

相关源代码：

控制器：

var CalendarController = Controller.extend("sap.ui.unified.sample.CalendarMultipleDaySelection.CalendarMultipleDaySelection", {
        oFormatYyyymmdd: null,
        oModel: null,
        onInit: function(oEvt) {
            this.oFormatYyyymmdd = sap.ui.core.format.DateFormat.getInstance({
                pattern: "dd.MM.yyyy",
                calendarType: sap.ui.core.CalendarType.Gregorian
            });
            this.oModel = new JSONModel({
                selectedDates: []
            });
            this.oCopyModel = new JSONModel({
                selectedDates: []
            });
            var oCalendar = this.getView().byId("calendar");
            oCalendar.setModel(this.oModel);
        },
        handleCalendarSelect: function(oEvt) {
            var oCalendar = oEvt.oSource;
            var aSelectedDates = oCalendar.getSelectedDates();
            console.log(aSelectedDates);
            var oDate;
            var oData = {
                selectedDates: []
            };
            var oTable = this.getView().byId("dateTable");


            if (aSelectedDates.length > 0) {
                for (var i = 0; i < aSelectedDates.length; i++) {
                    oDate = aSelectedDates[i].getStartDate();
                    oData.selectedDates.push({
                        Date: this.oFormatYyyymmdd.format(oDate)
                    });
                }
                this.oModel.setData(oData);
                if (this.oCopyModel.getProperty("/selectedDates/length") >= 0) {
                    this.oCopyModel.setData(oData);
                    oTable.setModel(this.oCopyModel);
                }
            } else {
                this._clearModel();
            }
        },
        return CalendarController;

var CalendarController=Controller.extend（“sap.ui.unified.sample.CalendarMultipleDaySelection.CalendarMultipleDaySelection”{
OfFormatyyyyymmdd:null，
oModel:null，
onInit：功能（oEvt）{
this.oFormatYyyymmdd=sap.ui.core.format.DateFormat.getInstance({
模式：“dd.MM.yyyy”，
calendarType:sap.ui.core.calendarType.Gregorian
});
this.oModel=新的JSONModel({
选定日期：[]
});
this.oCopyModel=新的JSONModel({
选定日期：[]
});
var oCalendar=this.getView（）.byId（“日历”）；
setModel（this.oModel）；
},
handleCalendarSelect：功能（oEvt）{
var oCalendar=oEvt.oSource；
var aSelectedDates=oCalendar.getSelectedDates（）；
控制台日志（一个选定的日期）；
变节；
变量oData={
选定日期：[]
};
var oTable=this.getView（）.byId（“日期表”）；
如果（aSelectedDates.length>0）{
对于（变量i=0；i=0）{
这个.oCopyModel.setData（oData）；
oTable.setModel（this.oCopyModel）；
}
}否则{
这个；
}
},
返回日历控制器；

视图：

问候

---

Maximilian

我创建了一个小示例：

有几点：

• 我只是在所选日期中添加了一些属性（

  startTime

  和

  endTime

  ）。您现在可以使用时间选择器修改时间，更改存储在模型中
• 日历的数据绑定似乎已损坏。我还必须使用

  getSelectedDates

  。这可能是由于

  singleSelection=“false”

  。使用single selection时，您可以通过数据绑定访问所选日期（或间隔）
• 永远不要访问内部属性（

  oEvt.oSource

  ）。此属性有访问器（

  oEvt.getSource（）

  ）

---

我创建了一个小示例：

有几点：

• 我只是在所选日期中添加了一些属性（

  startTime

  和

  endTime

  ）。您现在可以使用时间选择器修改时间，更改存储在模型中
• 日历的数据绑定似乎已损坏。我还必须使用

  getSelectedDates

  。这可能是由于

  singleSelection=“false”

  。使用single selection时，您可以通过数据绑定访问所选日期（或间隔）
• 永远不要访问内部属性（

  oEvt.oSource

  ）。此属性有访问器（

  oEvt.getSource（）

  ）

---

您应该能够通过表本身超出所有数据，尝试：通过id获取表，使用tables getItems函数获取这些，这是一个数组，因此您可以按顺序选择项目（从[0]开始），从那里您可以访问DatePickerThis.getView（）.byId（“tableID”）.getItems（）[x].getCells（）[y].getValue应该为您提供DatePicker的当前值直接访问项目不是最佳做法。这就是模型的用途。谢谢你们的评论，@Marc在这种情况下，您有没有建议如何或是否应该将计时器选择器绑定到模型？您应该能够通过表本身超出所有数据，请尝试：获取表格e通过id，

<content>
<unified:Calendar id="calendar" select="handleCalendarSelect" intervalSelection="false" singleSelection="false"/>
<Table id="dateTable" items="{path: '/selectedDates', sorter: {path: 'Date', comparator: '.dateComperator'}}"mode="None" fixedLayout="true">
    <columns>
        <Column>
            <header>
                <Text text="Date"/>
            </header>

        </Column>
        <Column>
            <header>
                <Text text="Beginning"/>
            </header>
        </Column>
        <Column>
            <header>
                <Text text="End"/>
            </header>
        </Column>
    </columns>
    <ColumnListItem>
        <Text text="{Date}"/>
        <TimePicker value="10:00" valueFormat="HH:mm" displayFormat="HH:mm" change="handleChange"/>
        <TimePicker value="11:00" valueFormat="HH:mm" displayFormat="HH:mm" change="handleChange"/>
    </ColumnListItem>
</Table>