【发布时间】：2018-01-07 04:43:06
【问题描述】：
我正在根据日期实施时间选择器，然后选择时间。
现在滑块完美地绘制了静态时间。
参见示例：
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 日 04:00 到 2017 年 7 月 31 日 12:00 填充。现在它总是相同的填充（绘制）。我尝试了更多，但我无法使这个带有日期的滑块变得灵活。请分享你的想法。谢谢。
【问题讨论】：
标签： javascript jquery angularjs date