繪製Rzslider基於角js中的當前持續時間？

Question

我正在執行基於日期的時間選擇器，然後選擇時間。 現在，滑塊爲靜態時間繪製完美。
見例如：

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.

所以現在它僅包含默認時間爲08:00至16:00。當我更改日期時，它將在08:00至16:00再次設置。但是我想，當我登陸這個頁面時，它會花費當前時間並且花費4小時和4小時。那麼8小時的持續時間滑塊應該繪製。例如，如果我在2017年7月31日08:00登陸，那麼滑塊應從2017年7月31日起至2017年7月31日12月31日止。現在它始終是相同的填充（繪製）。我嘗試了更多，但我無法使用日期靈活地使用此滑塊。請分享你的想法。謝謝。

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.