0

J'ai créé un curseur de plage de dates en utilisant les matériaux AngularJS et Angular, mais actuellement je peux retourner la valeur min et max de la plage de dates en tant que variable unique. pour stocker et renvoyer ces valeurs à travers deux variables séparées qui doivent être utilisées dans une demande POST plus tard.Date de retour sorties de la plage de dates angulaires Curseur dans deux variables différentes

par exemple.

var a: 2016-01-01T00: 00: 00

var b: 2018-01-01T00: 00: 00

Voici le violon de travail pour le code actuel.

https://jsfiddle.net/rehan516/m0ygxvdj/

HTML

<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script> 
<div ng-app="rzSliderDemo"> 
    <div ng-controller="MainCtrl" class="wrapper"> 
     <article> 
      {{slider.minValue}} 
      {{slider.maxValue}} 
      <rzslider rz-slider-model="slider.minValue" 
      rz-slider-high="slider.maxValue" 
      rz-slider-options="slider.options"></rzslider> 
     </article> 
     </div> 
     </div> 

JS

var app = angular.module('rzSliderDemo', ['rzModule', 'ngMaterial','ngAnimate','ngAria']); 

app.controller('MainCtrl', function ($scope, $rootScope) { 
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();//returning date range 
     return ''; 
    } 
    } 
}; 
}); 

PO ST QUERY

{ 
"query": { 
"bool": { 
"must": [ 
{ 
"range": { 
"metadata.o2r.temporal.begin": { 
"from": "2016-01-01T12:35:41.142Z" 
} 
} 
} , 
{ 
"range": { 
"metadata.o2r.temporal.end": { 
"to": "2016-12-30T22:00:00.000Z" 
} 
} 
} 
] 
} 
} 
} 
' 
+0

Quel est exactement le problème? 'slider.minValue' et' slider.maxValue' contiennent les valeurs dont vous avez besoin. Pour les envoyer via POST, il suffit de les affecter en tant que paramètres. Donc spécifiez ce que vous voulez réaliser ou publiez aussi le code où vous faites le 'POST'. – Eddi

+0

@Eddi la valeur minvalue et max ne sont que les dates initiales. Je veux aller chercher la date de début et de fin du curseur quand il est glissé, les stocker dans différentes variables qui seront ensuite appelées dans la requête http affichée ci-dessus donc fondamentalement la date de début pour FROM et la date de fin pour TO – Rehan

+0

les valeurs utilisées pour définir la plage du curseur, c'est vrai. Mais chaque fois que vous faites glisser le curseur min ou max, vous pouvez voir que les valeurs sont mises à jour. Dans votre exemple, les valeurs au-dessus du curseur changent constamment en utilisant les curseurs. Dans votre fonction où vous effectuez la requête, vous pouvez affecter, par ex. 'var from = $ scope.slider.minValue' – Eddi

Répondre

0

Les suggestions dans les commentaires ont bien fonctionné. C'est ainsi que j'ai mis à jour la section `$ scope.slider de mon fichier JS.

$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) 
     lower =$scope.slider.minValue; 
     upper =$scope.slider.maxValue; 
      return date.toISOString(); 
     } 
    } 
    }; 

i ajouté deux nouvelles variables, puis passé ceux-ci à ma demande POST.