使用angularjs和UI引导创建时间范围UI_Angularjs_Twitter Bootstrap_Datepicker_Timepicker

使用angularjs和UI引导创建时间范围UI

angularjs twitter-bootstrap

使用angularjs和UI引导创建时间范围UI,angularjs,twitter-bootstrap,datepicker,timepicker,Angularjs,Twitter Bootstrap,Datepicker,Timepicker,我使用一个日期选择器和两个时间选择器来创建给定日期内的时间范围（生成两个日期对象）日期选择器的ng模型指向开始日期，并在ng更改时将日期部分复制到结束日期。到目前为止还不错但是：修改结束时间会将结束日期恢复为其原始值标记： <!doctype html> <html ng-app="ui.bootstrap.demo"> <head> <script src="//ajax.googleapis.com/ajax/libs/angula

我使用一个日期选择器和两个时间选择器来创建给定日期内的时间范围（生成两个日期对象）

日期选择器的ng模型指向开始日期，并在ng更改时将日期部分复制到结束日期。到目前为止还不错

但是：修改结束时间会将结束日期恢复为其原始值

标记：

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="TimepickerDemoCtrl">
  <h1>Purpose: UI for a time range within a day</h1>
  <p>Issue: Updating the date sets the correct end date BUT updating the end time reverts the end date back to its original value.</p>
  <div class="input-group" style="width:150px">
      <input type="text" required ng-model="item.startDate" ng-change="setEndDate()" class="form-control" datepicker-popup="yyyy-MM-dd" is-open="datePicker" />
      <span class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click="openPicker($event, 'datePicker')"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
  </div>
  <timepicker ng-model="item.startDate" show-meridian="false"></timepicker>
  <timepicker ng-model="item.endDate" show-meridian="false"></timepicker>

  <pre class="alert alert-info">start is: {{item.startDate | date:'yyyy-MM-dd HH:mm' }}<br/>end is:   {{item.endDate | date:'yyyy-MM-dd HH:mm' }}<br/>Duration: {{item.duration() | number:2}}</pre>

</div>
  </body>
</html>

由于某些原因，UI引导日期选择器在您的情况下不会观察到endDate值的修改

您可以复制startDate对象并链接到endDate，而不是修改endDate：

  $scope.setEndDate = function() {
    $scope.item.endDate = angular.copy($scope.item.startDate);
  };

  $scope.setEndDate = function() {
    $scope.item.endDate = angular.copy($scope.item.startDate);
  };