Returning Date outputs from Angular Date range Slider in two different variables

Question

I have created a date range slider using AngularJS and Angular materials but currently i am able to return the min and max value of the date range as single variable however i want to store and return these values through two seperate variable which are to be used in a POST request later.

e.g.

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

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

Here is the working fiddle for the current code.

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

POST 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"
}
}
}
]
}
}
}
'

What exactly is the problem? `slider.minValue` and `slider.maxValue` contain the values you need. In order to send them via `POST` you just have to assign them as parameters. So either specify what you want to achieve or also post the code where you are doing the `POST`. — Eddi, May 23 '17 at 08:55
@Eddi the minvalue and max value are just the initial dates. i want to fetch the starting and ending date from the slider as it is dragged, store them in differen variables which will then be called in the http query posted above so basically the starting date for FROM and ending date for TO — Rehan, May 23 '17 at 09:32
They initially are the values used for defining the slider range, that's right. But whenever you drag the min- or max-slider, you can see that the values are updated. In your example the values above the slider constantly change using the sliders. In your function where you do the query, you can assign e.g. `var from = $scope.slider.minValue` — Eddi, May 23 '17 at 09:40

score 2 · Accepted Answer · answered May 23 '17 at 13:42

The suggestions in the comments worked fine. This is how i updated the `$scope.slider section in my JS file .

$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 added two new variables and then passed these to my POST request.

Returning Date outputs from Angular Date range Slider in two different variables

1 Answers1