在Angular Js中选择日期之后，不要失去之前Rzslider的位置？
问题描述：
我使用RZslider作为日期和选择器。但是我又面临一些问题，并且非常恼火。而且在Rzlider和angularJs中也是新的。所以滑块包含8小时当前时间+ 4小时和-4小时。如果我运行滑块，那么它包含当前时间和-4，+4，示例如果当前时间是10:00，则滑块对齐06:00到14:00。
在Angular Js中选择日期之后，不要失去之前Rzslider的位置？
屏幕截图：
然后如果我改变滑块拖动一样，选择然后再次约会滑块后自带的默认电流值。但我不想在选择日期后更改滑块位置。因为如果我更改滑块并选择日期，那么我将点击一个应用按钮，然后我将获得开始日期，时间和结束日期，时间。
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>
<br />
<rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue" rz-slider-options="slider.options"></rzslider>
</article>
</div>
</div>所以如果我运行演示，然后我改变滑块位置后选择其他日期则滑块转到原来的位置（默认位置按目前的时间）。所以我不想在选择值后重置滑块值。
答
逻辑是存储maxValue和minValue小时。然后，当日期发生变化时，将新日期与旧时间（如果存在）结合起来。
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.getValue($scope.valueTypes.MIN),
maxValue: $scope.getValue($scope.valueTypes.MAX),
options: {
stepsArray: arr,
showTicks: true,
draggableRange: true,
onChange: function() {
$scope.minValueHour = moment($scope.slider.minValue).get('hour');
$scope.maxValueHour = moment($scope.slider.maxValue).get('hour');
}
}
};
});
}
$scope.valueTypes = {
MIN: 'min',
MAX: 'max'
};
$scope.getValue = function(kind) {
var localTime = $scope.localTime.clone();
if ($scope[kind + 'ValueHour']) {
localTime.set({hour: $scope[kind + 'ValueHour']});
}
else {
var method = kind === 'min' ? 'subtract' : 'add';
localTime[method](4, "hours")
}
return localTime.format('YYYY DD MMM HH:mm');
}
$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>
<br />
<rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue" rz-slider-options="slider.options"></rzslider>
</article>
</div>
</div>
你的意思是与滑块你挑时间（10:00为例），那么你更改日期的日期选择器，然后滑点11 ：00再次，你想要的滑块将保持在10:00，但与新的日期？ –
@Mosh Feu。是的，我想用拖动滑块设置日期。 –
@MoshFeu。我会解释。如果我运行这个例子。拖动滑块并指向不同的时间。之后，如果我选择日期，则滑块会根据默认时间转到上一个位置。但我想如果我拖动滑块并选择日期，那么滑块不会移到上一个位置。 –