时间戳

首页 > 解决方案 > 如何将日历和两个时间选择器正确绑定到 sap.m.table？

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

问题描述

我现在正在学习 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;

看法：

<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>

亲切的问候

马克西米利安

标签： sapui5

解决方案

我创建了一个小例子：

https://next.plnkr.co/edit/OGmJimjF2YZ46mv6DsF2?preview

几点：

  • 我只是在选定的日期中添加了一些属性 (startTime和)。endTime您现在可以使用时间选择器修改时间，更改存储在模型中。
  • 日历的数据绑定似乎坏了。我也不得不使用getSelectedDates. 这可能是由于singleSelection="false". 使用单选时，您可以通过数据绑定访问选定的日期（或间隔）。
  • 永远不要访问内部属性 ( oEvt.oSource)。有这个 ( oEvt.getSource()) 的访问器。

推荐阅读