How to integrate input date with RZSlider as a timepicker Angular Js?

Question

I am implementing date and time picker with RZslider. I build RZslider as a time picker. So right now Rzslider taking current date. But I want to change date choose by user. I am sharing my demo example:

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

app.controller('MainCtrl', function($scope, $rootScope, $timeout) {


  var startDate, endDate, startTime, endTime;
  var currentDate = moment();

  var timeData = getRange();
  $scope.localTime = timeData.currentTime; // actually start of this hour

  var arr = timeData.times.map(n => {
    return {
      value: n.value
      //legend: n.value
    };
  });

  $scope.slider = {
     minValue: $scope.localTime.clone().subtract(4, "hours").format('DD MMM HH:mm'),
maxValue: $scope.localTime.clone().add(4, "hours").format('DD MMM HH:mm'),
    options: {
      showTicks: true,
      stepsArray: arr,
      draggableRange: true,
    }
  };
});

 function getRange(currentDate) {
var arr = [];
var totalHourRange = 32;
var currentTime = moment(); // current date and time using Moment

// set current time to beginning of the hour
currentTime.minute(0);
// clone date and substract 1/2 total range to get start point
var tmpTime = currentTime.clone();
tmpTime.hour(0).subtract(4, 'hours');
// offset is the number of minutes from the current point
for (var i = -((6 * totalHourRange) / 2); i <= (6 * totalHourRange) / 2; i++) {
  arr.push({value: tmpTime.format('DD MMM HH:mm'), offset: i * 10});
  tmpTime.add(10, 'minutes');
}
return { times: arr, currentTime: currentTime, totalHourRange: totalHourRange };
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css" rel="stylesheet" />
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<div ng-app="rzSliderDemo">
  <div ng-controller="MainCtrl" class="wrapper">
    <header>
      <h2>AngularJS Touch Slider</h2>
    </header>
    <article>
      <div class="form-group">
        <label for="choos-birth" class="control-label">choose date:</label>
        <div class="control">
          <input id="choos-birth" class="form-control" type="date" ng-model="dateBirth" style="witdh:100px;">
        </div>
      </div>
      <h4>Local time (beginning of the hour): <em>{{localTime.format('MMMM Do YYYY, h:mm a')}}</em></h4>
      <br /> Model:
      <input type="text" ng-model="slider.minValue" />
      <input type="text" ng-model="slider.maxValue" />
      <br />
      <br />
      <rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue" rz-slider-options="slider.options"></rzslider>
    </article>
  </div>
</div>

If I select 2 July then slider have changed the legend. You can see in the screen shot.

I tried the put $scope.dateBirth place of var currentTime = moment(); mean var currentTime = $scope.dateBirth; But It is not displaying in the html page. I am new in the angular But I read two way binding. I think It is related to two way binding. If you have some idea please share.

Mosh Feu · Accepted Answer · 2017-07-30T16:34:25.747

2

If I understand your question correctly, you need to "listen" (using $watch) to the changes in the dateBirth in your model. Then update the slider properly.

Something like this:

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

app.controller('MainCtrl', function($scope, $rootScope, $timeout) {
  $scope.$watch('dateBirth', function(n, o) {
    var middleDay = n || new Date();
    middleDay.setHours(12);
    $scope.selectedDate = moment(middleDay);
    $scope.init();
  });
  
  $scope.init = function() {
    var startDate, endDate, startTime, endTime;
    
    var timeData = getRange($scope.selectedDate);
    $scope.localTime = timeData.currentTime; // actually start of this hour
    
    var arr = timeData.times.map(n => {
      return {
        value: n.value
        //legend: n.value
      };
    });
    
    $timeout(function(){
      $scope.slider = {
        minValue: $scope.localTime.clone().subtract(4, "hours").format('MMM Do hh:mma'),
        maxValue: $scope.localTime.clone().add(4, "hours").format('MMM Do hh:mma'),
        options: {
          showTicks: true,
          stepsArray: arr,
          draggableRange: true,
        }
      };
    });
  }
  
  $scope.init();
});

function getRange(currentDate) {
  var arr = [];
  var totalHourRange = 32;
  var currentTime = currentDate || moment(); // current date and time using Moment
  
  // set current time to beginning of the hour
  currentTime.minute(0);
  
  // clone date and substract 1/2 total range to get start point
  var tmpTime = currentTime.clone();
  tmpTime.subtract(totalHourRange / 2, 'hours');
  
  // offset is the number of minutes from the current point
  for (var i = -6 * (totalHourRange / 2); i <= 6 * (totalHourRange / 2); i++) {
    arr.push({value: tmpTime.format('MMM Do hh:mma'), offset: i * 10});
    tmpTime.add(10, 'minutes');
  }
  return { times: arr, currentTime: currentTime, totalHourRange: totalHourRange };
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css" rel="stylesheet" />
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<div ng-app="rzSliderDemo">
  <div ng-controller="MainCtrl" class="wrapper">
    <header>
      <h2>AngularJS Touch Slider</h2>
    </header>
    <article>
      <div class="form-group">
        <label for="choos-birth" class="control-label">choose date:</label>
        <div class="control">
          <input id="choos-birth" class="form-control" type="date" ng-model="dateBirth" style="witdh:100px;">
        </div>
      </div>
      <h4>Local time (beginning of the hour): <em>{{localTime.format('MMMM Do YYYY, h:mm a')}}</em></h4>
      <br /> Model:
      <input type="text" ng-model="slider.minValue" />
      <input type="text" ng-model="slider.maxValue" />
      <br />
      <br />
      <rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue" rz-slider-options="slider.options"></rzslider>
    </article>
  </div>
</div>

http://jsbin.com/jinaru/5/edit?html,js

edited Jul 30 '17 at 16:34

answered Jul 30 '17 at 15:11

Mosh Feu

28,354
16
88
135

@ Mosh Feu ..This approximatly correct. BUt If i select 2jul then should start from 1 july and en3 july. If i select 14 july then should start 13 july and end 15 july. It is started correctly but end date or selected date is same – Varun Sharma Jul 30 '17 at 15:40
If some confusion then It is related to https://stackoverflow.com/questions/45350964/make-32-hrs-range-in-rzslider-in-angular-js/45384013?noredirect=1#comment77735966_45384013. Please see this link – Varun Sharma Jul 30 '17 at 15:49
@ Mosh Feu I update my demo working example. Please run one time. then It will more clear what I want. thanks for the support – Varun Sharma Jul 30 '17 at 16:00
For now, when you selected new Date, the `currentDate`'s time will be 12pm so the calculation result will be between `Jul 1st 10:00am` and `Jul 2nd 02:00pm`. If you want to display from the 1th to the 3th the "middle" time should be 12am but not 12pm. See my update. – Mosh Feu Jul 30 '17 at 16:16
Thanks ..Could you add DD MMM HH:mm formate for the 24 hrs. Because your http://jsbin.com/jinaru/4/edit?html,js. is not opening.. thanks a lot from heart.. – Varun Sharma Jul 30 '17 at 16:25
@VSH may be you haven't open output tab, please check [this link](http://jsbin.com/jinaru/4/edit?html,js,output) – Pankaj Parkar Jul 30 '17 at 19:27
@MoshFeu Thanks a lot – Varun Sharma Jul 31 '17 at 04:58
@MoshFeu. It is working fine. But If I change slider mean dragged and change the slider value and after that select the date from date picker then slider reset. Slider loss the value. It is by default taking value in 8 and 16. So I have seen var middleDay = new Date(findParameter.startDateUtc) , middleDay.setHours(12); So how can modify. If I land on the page right now then should be plotted point -4hrs and +4hrs. So suppose time is 14 then slider range should be 10 to 18. – Varun Sharma Jul 31 '17 at 06:59
Just remove that line: `middleDay.setHours(12);` – Mosh Feu Jul 31 '17 at 09:16
I tried this one. But When I remove middleDay.setHours(12). Slider going to 24 then agian start clock 0 to 12 then going to 4AM. Adding 12 hrs extra without middleDay – Varun Sharma Jul 31 '17 at 11:32
Why it going to 24? The middle day is the current datetime so it point to the current hour not to 24.. – Mosh Feu Jul 31 '17 at 11:34
your code considering 12hrs clock. But I am converting in 24 hrs clock. Please check my above demo example – Varun Sharma Jul 31 '17 at 11:39
It is going 20:00 to 23:50 then going to 23:50,00:00, 04:00 – Varun Sharma Jul 31 '17 at 11:42
`above demo ` where? – Mosh Feu Jul 31 '17 at 11:46
tmpTime.hour(0).subtract(4, 'hours'); – Varun Sharma Jul 31 '17 at 11:47
I am using place of tmpTime.subtract(totalHourRange / 2, 'hours'); – Varun Sharma Jul 31 '17 at 11:47
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/150605/discussion-between-v-sh-and-mosh-feu). – Varun Sharma Jul 31 '17 at 11:50
Sorry, I can't be in chat right now. But It seems like an issue with moment. You need to understand why `tmpTime.hour(0).subtract(4, 'hours');` from **23:50** returns **20:00** instead of **19:50** – Mosh Feu Jul 31 '17 at 12:29
I want to explain my problem.If you have time please ping me. I will explain you – Varun Sharma Jul 31 '17 at 13:52

How to integrate input date with RZSlider as a timepicker Angular Js?

1 Answers1