AngularJS 슬라이더를 사용하여 범위 입력으로 날짜 입력

Question

저는 AngularJs와 AngularMaterials로 작업하고 있습니다. 응용 프로그램의 사용자가 날짜 입력을 다음 형식 (2016-01-01T00 : 00 : 00). 어떻게 AngularJS 슬라이더를 수정하여 날짜 입력에 사용할 수 있습니까?

Answer 1

나는 jsfiddle

HTML

<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> 
<div ng-app="rzSliderDemo"> 
    <div ng-controller="MainCtrl" class="wrapper"> 
     <article> 
      <rzslider rz-slider-model="slider.minValue" 
      rz-slider-high="slider.maxValue" 
      rz-slider-options="slider.options"></rzslider> 
     </article> 
     </div> 
     </div> 

JAVASCRIPT

var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']); 

app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) { 
var date1 = new Date(2017, 3, 1); 
var date2 = new Date(); 
var day; 
var dateArray = [date1]; 
while(date1 <= date2) { 
    day = date1.getDate() 
    date1 = new Date(date1.setDate(++day)); 
    dateArray.push(date1); 
} 
$scope.slider = { 
    minValue: dateArray[0], 
    maxValue: dateArray[dateArray.length-1], 
    value: dateArray[0], // or new Date(2016, 7, 10) is you want to use different instances 
    options: { 
    stepsArray: dateArray, 
    translate: function(date) { 
     if (date != null) 
     return date.toISOString(); 
     return ''; 
    } 
    } 
}; 
});