綁定單DATEVALUE到的DatePicker和TimePicker

Question

sap.m.DateTimeInput已過時，該DOCO建議使用sap.m.DatePicker和sap.m.TimePicker代替

自1.32.8版已過時。應該使用專用的sap.m.DatePicker 和/或sap.m.TimePicker控件。

我可以由單一DATEVALUE結合兩種控制

<Label text="Start Date" /> 
<HBox class="sapUiSmallMarginBottom"> 
    <DatePicker dateValue="{VM>/StartDate}" displayFormat="dd/MM/yyyy"> 
     <layoutData> 
      <FlexItemData growFactor="1" /> 
     </layoutData> 
    </DatePicker> 
    <TimePicker dateValue="{'VM>/StartDate'}" width="100%" > 
     <layoutData> 
      <FlexItemData growFactor="1" /> 
     </layoutData> 
    </TimePicker> 
</HBox> 

然而，當我改變TimePicker，日期設置爲劃時代並且類似地當我改變的DatePicker時間值被複位。

我希望能夠更改DatePicker並保持TimePicker值，並同樣更改TimePicker並保留DatePicker值。

任何人都知道如何做到這一點，唯一的事件是改變，這似乎爲時已晚。

Answer 1

我可以建議不要使用綁定來解決這個問題：

<Label text="Start Date" /> 
<HBox class="sapUiSmallMarginBottom"> 
    <DatePicker id="date" displayFormat="dd/MM/yyyy"> 
     <layoutData> 
      <FlexItemData growFactor="1" /> 
     </layoutData> 
    </DatePicker> 
    <TimePicker id="time" width="100%" > 
     <layoutData> 
      <FlexItemData growFactor="1" /> 
     </layoutData> 
    </TimePicker> 
</HBox> 

，並在控制器：

onInit: function(){ 
    var oData={StartDate: new Date("October 13, 2014 11:13:00")}; 
    sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel(oData), "VM"); 
}, 

onAfterRendering: function(){ 
    var oDate = sap.ui.getCore().getModel("VM").getData().StartDate; 
    sap.ui.getCore().byId(this.createId("date")).setDateValue(oDate); 
    sap.ui.getCore().byId(this.createId("time")).setDateValue(oDate); 
} 

如果您更新時間/日期這樣一來，其他值沒有按」改變。

Here是一個工作示例。

Answer 2

設法a simple solution using the change events

onInit: function() { 
    var oStartDate = new Date("October 13, 2014 11:13:00"); 
    var oData = { 
     StartDate: oStartDate 
    }; 
    sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel(oData), "VM"); 
    this._oldDateValue = oStartDate; 
}, 

newDate: function(oDate1, oDate2) { 
    return new Date(oDate1.getFullYear(), oDate1.getMonth(), oDate1.getDate(), oDate2.getHours(), oDate2.getMinutes(), oDate2.getMilliseconds()); 
}, 

onDateChange: function(oEvent) { 
    var oSource = oEvent.getSource(); 
    var oNew = oSource.getDateValue(); 
    var oDate; 
    if (this._oldDateValue !== oNew.getTime()) { 
     if (oSource.getMetadata().getName() === "sap.m.DatePicker") { 
      oDate = this.newDate(oNew, this._oldDateValue); 
     } else { 
      oDate = this.newDate(this._oldDateValue, oNew); 
     } 
     oSource.setProperty("dateValue", oDate, true); 
     this._oldDateValue = oDate; 
    } 
}