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

查看：28
本文介绍了在Angular Js中选择日期后不要丢失Rzslider的先前位置?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用 RZslider 作为日期和选择器.但我再次面临一些问题和 agin.以及 Rzlider 和 angularJs 中的新功能.所以滑块包含 8 小时的当前时间 +4 小时和 -4 小时.如果我运行滑块，则它包含当前时间和 -4、+4，示例如果当前时间为 10:00，则滑块填充 06:00 到 14:00.

屏幕截图:

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

var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']);app.controller('MainCtrl', function($scope, $rootScope, $timeout) {$scope.$watch('dateBirth', function(n, o) {var newDay = n ||新日期();$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;//这个小时的实际开始var arr = timeData.times.map(n => {返回 {值:n.value//图例:n.value};});$超时(功能(){$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'),选项: {showTicks: 真,步骤数组: arr，可拖动范围:真，}};});}$scope.init();});函数 getRange(currentDate) {var arr = [];var totalHourRange = 32;var currentTime = currentDate ||片刻();//使用 Moment 的当前日期和时间//设置当前时间为小时的开始当前时间.分钟(0)；//克隆日期并减去 1/2 总范围以获得起点var tmpTime = currentTime.clone();//tmpTime.subtract(totalHourRange/2, '小时');tmpTime.hour(0).subtract(4, '小时');//offset 是距离当前点的分钟数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, '分钟');}返回 { 时间:arr，currentTime:currentTime，totalHourRange:totalHourRange}；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="样式表"/><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"><标题><h2>AngularJS 触摸滑块</h2></标题><文章><div class="form-group"><label for="choos-birth" class="control-label">选择日期:</label><div class="控件"><input id="choos-birth" class="form-control" type="date" ng-model="dateBirth" style="witdh:100px;">

<br/><rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue" rz-slider-options="slider.options"></rzslider></文章>

所以，如果我运行演示，那么我会在选择另一个日期之后更改滑块位置，然后滑块转到上一个位置(根据当前时间的默认位置).所以我不想在选择值后重置滑块值.

解决方案

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

var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']);app.controller('MainCtrl', function($scope, $rootScope, $timeout) {$scope.$watch('dateBirth', function(n, o) {var newDay = n ||新日期();$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;//这个小时的实际开始var arr = timeData.times.map(n => {返回 {值:n.value//图例:n.value};});$超时(功能(){$scope.slider = {minValue: $scope.getValue($scope.valueTypes.MIN),maxValue: $scope.getValue($scope.valueTypes.MAX),选项: {步骤数组: arr，showTicks: 真,可拖动范围:真，onChange:函数(){$scope.minValueHour = moment($scope.slider.minValue).get('hour');$scope.maxValueHour = moment($scope.slider.maxValue).get('hour');}}};});}$scope.valueTypes = {MIN:'分钟'，最大:'最大'};$scope.getValue = 函数(种类){var localTime = $scope.localTime.clone();如果 ($scope[kind + 'ValueHour']) {localTime.set({hour: $scope[kind + 'ValueHour']});}别的 {var 方法 = 种类 === 'min' ?减":加"；localTime[方法](4, "小时")}return localTime.format('YYYY DD MMM HH:mm');}$scope.init();});函数 getRange(currentDate) {var arr = [];var totalHourRange = 32;var currentTime = currentDate ||片刻();//使用 Moment 的当前日期和时间//设置当前时间为小时的开始当前时间.分钟(0)；//克隆日期并减去 1/2 总范围以获得起点var tmpTime = currentTime.clone();//tmpTime.subtract(totalHourRange/2, '小时');tmpTime.hour(0).subtract(4, '小时');//offset 是距离当前点的分钟数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, '分钟');}返回 { 时间:arr，currentTime:currentTime，totalHourRange:totalHourRange}；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="样式表"/><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"><标题><h2>AngularJS 触摸滑块</h2></标题><文章><div class="form-group"><label for="choos-birth" class="control-label">选择日期:</label><div class="控件"><input id="choos-birth" class="form-control" type="date" ng-model="dateBirth" style="witdh:100px;">

<br/><rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue" rz-slider-options="slider.options"></rzslider></文章>

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

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.

解决方案

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆