Rzsliderを描く角度jsの現在の時間間隔に基づいて？

Question

私は日付に基づいてtimepickerを実装しています。その後、時間を選択します。 現在、スライダは静的時間を完全に描画します。

var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']); 
 

 
app.controller('MainCtrl', function($scope, $rootScope, $timeout) { 
 
    $scope.$watch('dateBirth', function(n, o) { 
 
    var middleDay = n || new Date(); 
 
    middleDay.setHours(12); 
 
    $scope.selectedDate = moment(middleDay); 
 
    $scope.init(); 
 
    }); 
 
    
 
    $scope.init = function() { 
 
    var startDate, endDate, startTime, endTime; 
 
    
 
    var timeData = getRange($scope.selectedDate); 
 
    $scope.localTime = timeData.currentTime; // actually start of this hour 
 
    
 
    var arr = timeData.times.map(n => { 
 
     return { 
 
     value: n.value 
 
     //legend: n.value 
 
     }; 
 
    }); 
 
    
 
    $timeout(function(){ 
 
     $scope.slider = { 
 
     minValue: $scope.localTime.clone().subtract(4, "hours").format('YYYY DD MMM HH:mm'), 
 
     maxValue: $scope.localTime.clone().add(4, "hours").format('YYYY DD MMM HH:mm'), 
 
     options: { 
 
      showTicks: true, 
 
      stepsArray: arr, 
 
      draggableRange: true, 
 
     } 
 
     }; 
 
    }); 
 
    } 
 
    
 
    $scope.init(); 
 
}); 
 

 
function getRange(currentDate) { 
 
    var arr = []; 
 
    var totalHourRange = 32; 
 
    var currentTime = currentDate || moment(); // current date and time using Moment 
 
    
 
    // set current time to beginning of the hour 
 
    currentTime.minute(0); 
 
    
 
    // clone date and substract 1/2 total range to get start point 
 
var tmpTime = currentTime.clone(); 
 
    tmpTime.subtract(totalHourRange/2, 'hours'); 
 
    
 
    // offset is the number of minutes from the current point 
 
    for (var i = -6 * (totalHourRange/2); i <= 6 * (totalHourRange/2); i++) { 
 
     arr.push({value: tmpTime.format('YYYY DD MMM HH:mm'), offset: i * 10}); 
 
     tmpTime.add(10, 'minutes'); 
 
    } 
 
    return { times: arr, currentTime: currentTime, totalHourRange: totalHourRange }; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script> 
 
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<div ng-app="rzSliderDemo"> 
 
    <div ng-controller="MainCtrl" class="wrapper"> 
 
    <header> 
 
     <h2>AngularJS Touch Slider</h2> 
 
    </header> 
 
    <article> 
 
     <div class="form-group"> 
 
     <label for="choos-birth" class="control-label">choose date:</label> 
 
     <div class="control"> 
 
      <input id="choos-birth" class="form-control" type="date" ng-model="dateBirth" style="witdh:100px;"> 
 
     </div> 
 
     </div> 
 
     <h4>Local time (beginning of the hour): <em>{{localTime.format('MMMM Do YYYY, h:mm a')}}</em></h4> 
 
     <br /> Model: 
 
     <input type="text" ng-model="slider.minValue" /> 
 
     <input type="text" ng-model="slider.maxValue" /> 
 
     <br /> 
 
     <br /> 
 
     <rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue" rz-slider-options="slider.options"></rzslider> 
 
    </article> 
 
    </div> 
 
</div> 
 
Because of this middleDay.setHours(12); it is started from 08:00 and end 16:00. When I remove this one then slider timing will change.

だから今、それは午後4時00分時間にデフォルト8：00でのみ含まれます：
は、例を参照してください。日付を変更すると、再び08：00〜16：00に設定されます。しかし、私は今までにこのページに着陸したら、現在の時間がかかり、+ 4時間と-4時間かかるでしょう。 8時間のスライダを描きます。たとえば、2017年7月31日08:00に着陸した場合、スライダは2017年7月4日から2017年7月12日31日までに記入する必要があります。今はいつも同じ充填（描く）。私はもっ​​と試しましたが、このスライダを日付付きでフレキシブルにすることはできません。あなたのアイデアをお伝えください。ありがとう。 K Scandrett @

Answer 1

var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']); 
 

 
app.controller('MainCtrl', function($scope, $rootScope, $timeout) { 
 
    $scope.$watch('dateBirth', function(n, o) { 
 
    var newDay = n || new Date(); 
 
    $scope.selectedDate = moment(newDay); 
 
    $scope.selectedDate.hour(moment().hour()); 
 
    $scope.selectedDate.minute(0); 
 
    $scope.init(); 
 
    }); 
 
    
 
    $scope.init = function() { 
 
    var startDate, endDate, startTime, endTime; 
 
    
 
    var timeData = getRange($scope.selectedDate); 
 
    $scope.localTime = timeData.currentTime; // actually start of this hour 
 
    
 
    var arr = timeData.times.map(n => { 
 
     return { 
 
     value: n.value 
 
     //legend: n.value 
 
     }; 
 
    }); 
 
    
 
    $timeout(function(){ 
 
     $scope.slider = { 
 
     minValue: $scope.localTime.clone().subtract(4, "hours").format('YYYY DD MMM HH:mm'), 
 
     maxValue: $scope.localTime.clone().add(4, "hours").format('YYYY DD MMM HH:mm'), 
 
     options: { 
 
      showTicks: true, 
 
      stepsArray: arr, 
 
      draggableRange: true, 
 
     } 
 
     }; 
 
    }); 
 
    } 
 
    
 
    $scope.init(); 
 
}); 
 

 
function getRange(currentDate) { 
 
    var arr = []; 
 
    var totalHourRange = 32; 
 
    var currentTime = currentDate || moment(); // current date and time using Moment 
 
    
 
    // set current time to beginning of the hour 
 
    currentTime.minute(0); 
 
    
 
    // clone date and substract 1/2 total range to get start point 
 
var tmpTime = currentTime.clone(); 
 
    //tmpTime.subtract(totalHourRange/2, 'hours'); 
 
    tmpTime.hour(0).subtract(4, 'hours'); 
 
    
 
    // offset is the number of minutes from the current point 
 
    for (var i = -6 * (totalHourRange/2); i <= 6 * (totalHourRange/2); i++) { 
 
     arr.push({value: tmpTime.format('YYYY DD MMM HH:mm'), offset: i * 10}); 
 
     tmpTime.add(10, 'minutes'); 
 
    } 
 
    return { times: arr, currentTime: currentTime, totalHourRange: totalHourRange }; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script> 
 
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<div ng-app="rzSliderDemo"> 
 
    <div ng-controller="MainCtrl" class="wrapper"> 
 
    <header> 
 
     <h2>AngularJS Touch Slider</h2> 
 
    </header> 
 
    <article> 
 
     <div class="form-group"> 
 
     <label for="choos-birth" class="control-label">choose date:</label> 
 
     <div class="control"> 
 
      <input id="choos-birth" class="form-control" type="date" ng-model="dateBirth" style="witdh:100px;"> 
 
     </div> 
 
     </div> 
 
     <h4>Local time (beginning of the hour): <em>{{localTime.format('MMMM Do YYYY, h:mm a')}}</em></h4> 
 
     <br /> Model: 
 
     <input type="text" ng-model="slider.minValue" /> 
 
     <input type="text" ng-model="slider.maxValue" /> 
 
     <br /> 
 
     <br /> 
 
     <rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue" rz-slider-options="slider.options"></rzslider> 
 
    </article> 
 
    </div> 
 
</div> 
 
Because of this middleDay.setHours(12); it is started from 08:00 and end 16:00. When I remove this one then slider timing will change.