Search code examples
javascriptjqueryangularjsangularjs-slider

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

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.

enter image description here

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.

Solution

  • 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