Angularjs：初期日付スライダの位置を設定する

anglejsの日付スライダの開始/終了日の初期位置を設定しようとしています。ここに私がいるところがある。あなたが見ると、2018-11-30にしたいときは、endの位置は2018-11-01（vm.slider.max参照）に初期化されます。任意の提案が高く評価されました。Angularjs：初期日付スライダの位置を設定する

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>

出典

2017-12-18 geotheory

実装の問題点は、スライダが文字列で範囲を計算することができないということです。スライダオブジェクトでは、日付範囲をロケール文字列として設定し、minおよびmax値を定義することは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

出典

2017-12-18 15:16:13 31piy

ありがとうございました。 – geotheory

Angularjs：初期日付スライダの位置を設定する

答えて

関連する問題