angularjs 및 UI 부트 스트랩을 사용하여 시간 범위 UI 만들기

저는 datepicker와 두 개의 timepickers를 사용하여 주어진 날짜 내에 시간 범위를 만들었습니다 (결과적으로 두 개의 날짜 객체가 생성됨).angularjs 및 UI 부트 스트랩을 사용하여 시간 범위 UI 만들기

datepicker의 ng-model은 시작 날짜를 가리키며 ng-change시 날짜 부분을 종료 날짜로 복사합니다. 여태까지는 그런대로 잘됐다.

하지만 종료 시간을 수정하면 종료 날짜가 원래 값으로 되돌아갑니다!

마크 업 :

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

출처

2015-01-21 Johann Viehböck

귀하의 경우 endDate가 값 수정을 준수하지 않는 몇 가지 이유 UI 부트 스트랩 날짜 선택기에서. 대신 당신이 endDate가에의 startDate 객체와 링크를 복사 할 수 endDate가 수정

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

출처

2015-01-21 14:53:46

angularjs 및 UI 부트 스트랩을 사용하여 시간 범위 UI 만들기

답변

관련 문제