Question

我正在尝试设置angularjs日期滑块的初始开始/结束日期位置。这就是我在的地方。正如您所希望的那样，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>

Answer 1

您的实现问题是滑块无法计算字符串的范围。在滑块对象中，您将日期范围设置为区域设置字符串，并将最小值和最大值定义为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：设置初始日期滑块位置

1 个答案: