Timepicker：如何通過首先更改更改第二個值？

我正在研究PHP，Bootstrap和Angular JS中的議程應用程序。
見Plunker用於實時預覽：http://plnkr.co/edit/FSXB9IvGWOMgFzuEASEl?p=preview

現在，如果我想用一小時來改變「開始時間」，我想「結束時間」也改變1小時。（所以當改變開始時間時，間隔總是最少1小時）。當改變「結束時間」時，間隔是否大於1小時並不重要。
Timepicker：如何通過首先更改更改第二個值？

我想是這樣的：

$scope.updateTimeEnd = function() { 
\t $scope.TimeEnd.setHours($scope.TimeStart.getHours() + 1); 
\t };

<div class="row"> 
    <div class="col-xs-6"> 
    <div class="selectStartTime"> 
     <timepicker ng-model="TimeStart" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker> 
    </div> 
    </div> 
    <div class="col-xs-6"> 
    <div class="selectEndTime"> 
     <timepicker ng-model="TimeEnd" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker> 
    </div> 
    </div> 
</div>

的 <timepicker>元素包含在這個js文件： <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>

誰能告訴我如何做到這一點？

我不介意它與角度（如ng-bind）或Javascript。

來源

2015-04-02 Kevin Rovers

$scope.updateTimeEnd = function() { 
    var d = new Date(); 
    d.setHours($scope.TimeStart.getHours() +1); 
    //d.setMinutes($scope.TimeStart.getMinutes()); 
    $scope.TimeEnd = d; 
}; 

$scope.$watch('TimeStart', function() { 
    $scope.updateTimeEnd(); 
});

來源

2015-04-02 12:56:53 Giannis

嗨@Giannis，將此函數添加到我的js文件時，它仍然不做任何事情。 – 2015-04-02 14:02:42

@KevinRovers如果你把它放在你的Plunker例子（dateTime.js）上，並按下底部開始時間小時選擇器上的上/下按鈕，你會看到在「Selected date」頂部更新的TimeStart/End日期標籤。 – Giannis 2015-04-03 08:44:44

感謝您的評論，但我希望右側的小時選擇器更改值，頂部的框僅顯示結果。我將它添加到了蹲下的例子中。 – 2015-04-03 09:17:33

Timepicker：如何通過首先更改更改第二個值？

回答

相關問題