Создание временного интерфейса с помощью angularjs и загрузочного интерфейса

Я использую DatePicker и два Timepicker для создания временного диапазона в течение данного дня (в результате два объекта даты).

Модель 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>

Автор сценария:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TimepickerDemoCtrl', function ($scope, $log) {
  var starttime = new Date();
  starttime.setHours(8);
  starttime.setMinutes(0);
  var endtime = new Date();
  endtime.setHours(17);
  endtime.setMinutes(0);

  $scope.item = {
    startDate: starttime,
    endDate: endtime,
    duration: function () { return moment.duration(moment(this.endDate) - moment(this.startDate)).asHours() }
  }

  $scope.setEndDate = function() {
    $scope.item.endDate.setDate($scope.item.startDate.getDate());
    $scope.item.endDate.setMonth($scope.item.startDate.getMonth());
    $scope.item.endDate.setFullYear($scope.item.startDate.getFullYear());
  }

  $scope.openPicker = function ($event, pickerInstance) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope[pickerInstance] = true;
  };

});

http://plnkr.co/edit/zCFgf0mt4WOZeG9MPA9d

Источник

1 ответ

По какой-то причине в датчике Bootstrap пользовательского интерфейса не наблюдается изменение значения endDate в вашем случае.

Вместо изменения endDate вы можете скопировать объект startDate и ссылку на endDate:

  $scope.setEndDate = function() {
    $scope.item.endDate = angular.copy($scope.item.startDate);
  };
Источник
Другие вопросы по тегам