Menu
I'm trying to set the initial start/end date positions for an angularjs date slider. Here's where I'm at. As you'll see the end position initialises as 2018-11-01 (see vm.slider.max) when I want it to be 2018-11-30. Any suggestions appreciated.
https://jsfiddle.net/geotheory/uxxsq80k/
<!DOCTYPE html>
<html>
<head>
<title>angular slider test</title>
<meta charset="utf-8">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/6.4.3/rzslider.min.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/6.4.3/rzslider.min.css">
</head>
<body>
<div ng-app="myapp">
<div ng-controller="TestController as vm">
<p><b>Last updated:</b> {{vm.lastSliderUpdated}}</p>
<rzslider rz-slider-model="vm.slider.min" rz-slider-high="vm.slider.max"
rz-slider-options="vm.slider.options"></rzslider>
</div>
</div>
<script>
var vm;
function getAllDays(start_date, end_date) {
var start_date = new Date(start_date);
var end_date = new Date(end_date);
range = []
mil = 86400000;
for (var i = start_date.getTime(); i < end_date.getTime(); i+=mil) {
range.push(new Date(i).toLocaleDateString())
}
return range;
}
var myApp = angular.module('myapp', ['rzModule']);
myApp.controller('TestController', TestController);
function TestController() {
vm = this;
vm.showDates = getAllDays('2018-11-01', '2018-11-30');
vm.lastSliderUpdated = '';
vm.myEndListener = function(sliderId) {
console.log('start: ', vm.slider.min, ', end: ', vm.slider.max);
};
vm.slider = { min: new Date('2018-11-01'), max: new Date('2018-11-30'),
options: { stepsArray: vm.showDates, id: 'sliderA', onEnd: vm.myEndListener}
};
}
</script>
</body>
</html>
261
The problem with your implementation is that the slider isn't able to calculate range on the strings. In the slider object, you're setting the date range as locale strings, and are defining the min and max values are Date objects.
To rectify this, I recommend having the range values as milliseconds instead of locale strings, and define min and max values as milliseconds as well. In addition, you can use the translate function to translate the value to display locale string in lieu of the date milliseconds.
...
for (var i = start_date.getTime(); i <= end_date.getTime(); i += mil) {
range.push(new Date(i).getTime());
}
...
vm.slider = {
min: new Date('2018-11-01').getTime(),
max: new Date('2018-11-30').getTime(),
options: {
stepsArray: vm.showDates,
id: 'sliderA',
onEnd: vm.myEndListener,
translate: (value) => {
return new Date(value).toLocaleDateString();
}
}
};
Check out this modified fiddle.
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
