在Angular Js中选择日期后，不会失去Rzslider的先前位置吗? [英] Don't lose previous position of Rzslider after select the date in Angular Js?

问题描述

我正在使用RZslider作为日期和选择器.但是我又一次遇到了一些问题.以及Rzlider和angularJs的新功能.因此Slider包含当前时间的8hrs + 4hrs和-4hrs.如果我运行滑块，则它包含当前时间和-4，+ 4.示例如果当前时间为10:00，则滑块将填充06:00至14:00.

I am using RZslider for the date and picker. But I am facing some problem again and agin. And also new in Rzlider and angularJs. So Slider containing 8hrs of current time +4hrs and -4hrs. If I am run the slider then it containing current time and -4, +4, Example If current time is 10:00 then slider filles 06:00 to 14:00.

屏幕截图:

然后，如果我更改滑块(如拖动")，并在选择了日期之后，滑块再次成为默认的当前值.但我不想在选择日期后更改滑块位置.因为如果我更改滑块并选择日期，那么我将单击一个应用"按钮，那么我将获得开始日期，时间和结束日期，时间.

Screen Shot:

Then If I change the slider Like drag and after select the date then slider again comes default current value. But I don't want to change slider position after select the date. Because if I change the slider and select the date then I will click one apply button then I will get start date, time and end date, time.

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

app.controller('MainCtrl', function($scope, $rootScope, $timeout) {
  $scope.$watch('dateBirth', function(n, o) {
    var newDay = n || new Date();
    $scope.selectedDate = moment(newDay);
    $scope.selectedDate.hour(moment().hour());
    $scope.selectedDate.minute(0);
    $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('YYYY DD MMM HH:mm'),
        maxValue: $scope.localTime.clone().add(4, "hours").format('YYYY DD MMM HH:mm'),
        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');
     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('YYYY 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>
      
      <br />
      <rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue" rz-slider-options="slider.options"></rzslider>
    </article>
  </div>
</div>

因此，如果我运行演示，则在选择其他日期后更改滑块位置，然后将滑块转到上一个位置(根据当前时间的默认位置).因此，我不想在选择值后重设滑块值.

So If I run the demo then I change the slider position after that select the other date then slider goto previous position(default position as per current time). So I don't want to reset slider value after select the value.

推荐答案

逻辑是存储maxValue和minValue小时.然后，当日期更改时，将新日期与旧时间结合起来(如果存在).

The logic is to store the maxValue and minValue hours. Then when the date change, combine the new date with the old hours (if exist).

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

app.controller('MainCtrl', function($scope, $rootScope, $timeout) {
  $scope.$watch('dateBirth', function(n, o) {
    var newDay = n || new Date();
    $scope.selectedDate = moment(newDay);
    $scope.selectedDate.hour(moment().hour());
    $scope.selectedDate.minute(0);
    $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.getValue($scope.valueTypes.MIN),
        maxValue: $scope.getValue($scope.valueTypes.MAX),
        options: {
          stepsArray: arr,
          showTicks: true,
          draggableRange: true,
          onChange: function() {
            $scope.minValueHour = moment($scope.slider.minValue).get('hour');
            $scope.maxValueHour = moment($scope.slider.maxValue).get('hour');
          }
        }
      };
    });
  }
  
  $scope.valueTypes = {
    MIN: 'min',
    MAX: 'max'
  };
  
  $scope.getValue = function(kind) {
    var localTime = $scope.localTime.clone();
    
    if ($scope[kind + 'ValueHour']) {
      localTime.set({hour: $scope[kind + 'ValueHour']});
    }
    else {
      var method = kind === 'min' ? 'subtract' : 'add';
      localTime[method](4, "hours")
    }
    
    return localTime.format('YYYY DD MMM HH:mm');
  }
  
  $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');
     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('YYYY 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>
      
      <br />
      <rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue" rz-slider-options="slider.options"></rzslider>
    </article>
  </div>
</div>

http://jsbin.com/zenaco/edit?html,js

这篇关于在Angular Js中选择日期后，不会失去Rzslider的先前位置吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！