gpt4 book ai didi

Angularjs:设置初始日期 slider 位置

转载 作者:行者123 更新时间:2023-12-04 17:47:17 26 4
gpt4 key购买 nike

我正在尝试为 angularjs 日期 slider 设置初始开始/结束日期位置。这就是我所在的位置。如您所见,end 位置初始化为 2018-11-01(参见 vm.slider.max) 2018-11-30。任何建议表示赞赏。

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>

最佳答案

您的实现的问题是 slider 无法计算字符串的范围。在 slider 对象中,您将日期范围设置为语言环境字符串,并将最小值和最大值定义为 Date 对象。

为了纠正这个问题,我建议将范围值设置为毫秒而不是区域设置字符串,并将最小值和最大值也定义为毫秒。此外,您可以使用 translate 函数将值转换为显示语言环境字符串以代替日期毫秒数。

...

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();
}
}
};

看看这个 modified fiddle .

关于Angularjs:设置初始日期 slider 位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47870931/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com