Faire une gamme de 32 heures dans RZSlider en J angulaire?

Je dois implémenter un RZSlider avec un intervalle de 10 minutes avec 32 heures. J'utilise le sélecteur de date aussi. J'ai donc configuré ce sélecteur de date et le curseur de temps dans une page html. Si je débarque sur cette page, il devrait être sélectionné par défaut la date actuelle avec la fenêtre de 8 heures, Moyenne -4H et + 4 heures avec la date actuelle. Par exemple: si j'arrive sur cette page 23 juillet à 23h00, la gamme devrait être de 19h00 à 3h00. Mais dans ce cas, 3:00 entre le 24 juillet. Je souhaite que ce curseur soit comme sélecteur de date avec le temps.

À partir de 8: 10,8: 20,8: 30,8: 40,8: 50,9: 10 ….. 12: 10,12: 20 ……. 23: 10,23: 20,23: 30,23: 40,23: 50,00: 00,00.10,00: 20,00: 30,00: 40,00: 50,1: 00 ……. 4:00 Fin À.

J'ai déjà implémenté une certaine logique pour la gamme 32Hrs, mais cela échoue dans certains cas, puis le curseur se brisera et le problème compatible viendra. Je ne peux pas afficher mon code car le code dépend d'un autre code.

var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']); app.controller('MainCtrl', function($scope, $rootScope, $timeout) { var arr = getRange().map(n => { return { value: n, legend: n }; }); $scope.slider = { minValue: '10.50', maxValue: '14.20', options: { showTicks: true, stepsArray: arr, draggableRange: true, } }; }); function getRange() { var arr = []; var d = new Date(2017, 1, 1); for (var i = 0; i < (6 * 28); i++) { d.setMinutes(d.getMinutes() + 10); arr.push(leadZero(d.getHours()) + '.' + leadZero(d.getMinutes())); } return arr; } function leadZero(time) { return time < 10 ? '0' + time : time; }

 <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> <div ng-app="rzSliderDemo"> <div ng-controller="MainCtrl" class="wrapper"> <header> <h1>AngularJS Touch Slider</h1> </header> <article> <h2>Simple slider</h2> Model: <input type="text" ng-model="slider.minValue" /> <input type="text" ng-model="slider.maxValue" /> <br/> <rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue" rz-slider-options="slider.options"></rzslider> </article> </div> </div>

Dans cet exemple, il va au lendemain 4 heures mais pas à la date précédente Heures.

Je ne suis pas tout à fait clair sur ce que vous attendez, mais j'espère que cela vous ouvrira sur la bonne voie.

J'utilise Moment pour faciliter le travail avec les dates.

En incluant le jour dans la valeur de la gamme, il rend la valeur unique afin que nous puissions définir les temps de début et de fin initiaux sans ambiguïté.

Vous pouvez ensuite utiliser Moment pour transformer les valeurs sélectionnées en objets date lorsque vous êtes prêt à faire quelque chose avec les valeurs.

 var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']); app.controller('MainCtrl', function($scope, $rootScope, $timeout) { var startDate, endDate, startTime, endTime; var currentDate = moment(); var timeData = getRange(); $scope.localTime = timeData.currentTime; // actually start of this hour var arr = timeData.times.map(n => { return { value: n.value //legend: n.value }; }); $scope.slider = { minValue: $scope.localTime.clone().subtract(4, "hours").format('MMM Do hh:mma'), maxValue: $scope.localTime.clone().add(4, "hours").format('MMM Do hh:mma'), options: { showTicks: true, stepsArray: arr, draggableRange: true, } }; }); function getRange(currentDate) { var arr = []; var totalHourRange = 28; var currentTime = 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('MMM Do hh:mma'), 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> <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>