欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件

程序员文章站 2022-03-20 19:14:04
在一个项目中需要一个用来输入分钟数和秒数的控件,然而调查了一些开源项目后并未发现合适的控件。在angular bootstrap ui中有一个类似的控件timepicker...

在一个项目中需要一个用来输入分钟数和秒数的控件,然而调查了一些开源项目后并未发现合适的控件。在angular bootstrap ui中有一个类似的控件timepicker,但是它并没有深入到分钟和秒的精度。
因此,决定参考它的源码然后自己进行实现。 
最终的效果如下:

 仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件

首先是该directive的定义:

 app.directive('minutesecondpicker', function() {
 return {
 restrict: 'ea',
 require: ['minutesecondpicker', '?^ngmodel'],
 controller: 'minutesecondpickercontroller',
 replace: true,
 scope: {
  validity: '='
 },
 templateurl: 'partials/directives/minutesecondpicker.html',
 link: function(scope, element, attrs, ctrls) {
  var minutesecondpickerctrl = ctrls[0],
  ngmodelctrl = ctrls[1];

  if(ngmodelctrl) {
  minutesecondpickerctrl.init(ngmodelctrl, element.find('input'));
  }
 }
 };
}); 

在以上的link函数中,ctrls是一个数组: ctrls[0]是定义在本directive上的controller实例,ctrls[1]是ngmodelctrl,即ng-model对应的controller实例。这个顺序实际上是通过require: ['minutesecondpicker', '?^ngmodel']定义的。
注意到第一个依赖就是directive本身的名字,此时会将该directive中controller声明的对应实例传入。第二个依赖的写法有些奇怪:"?^ngmodel",?的含义是即使没有找到该依赖,也不要抛出异常,即该依赖是一个可选项。^的含义是查找父元素的controller。
然后,定义该directive中用到的一些默认设置,通过constant directive实现:

app.constant('minutesecondpickerconfig', {
 minutestep: 1,
 secondstep: 1,
 readonlyinput: false,
 mousewheel: true
}); 

紧接着是directive对应的controller,它的声明如下:

 app.controller('minutesecondpickercontroller', ['$scope', '$attrs', '$parse', 'minutesecondpickerconfig', 
 function($scope, $attrs, $parse, minutesecondpickerconfig) {
 ...
}]); 

在directive的link函数中,调用了此controller的init方法:

 this.init = function(ngmodelctrl_, inputs) {
 ngmodelctrl = ngmodelctrl_;
 ngmodelctrl.$render = this.render;

 var minutesinputel = inputs.eq(0),
  secondsinputel = inputs.eq(1);

 var mousewheel = angular.isdefined($attrs.mousewheel) ? 
  $scope.$parent.$eval($attrs.mousewheel) : minutesecondpickerconfig.mousewheel;
 if(mousewheel) {
  this.setupmousewheelevents(minutesinputel, secondsinputel);
 }

 $scope.readonlyinput = angular.isdefined($attrs.readonlyinput) ?
  $scope.$parent.$eval($attrs.readonlyinput) : minutesecondpickerconfig.readonlyinput;
 this.setupinputevents(minutesinputel, secondsinputel);
 }; 

init方法接受的第二个参数是inputs,在link函数中传入的是:element.find('input')。 所以第一个输入框用来输入分钟,第二个输入框用来输入秒。
然后,检查是否覆盖了mousewheel属性,如果没有覆盖则使用在constant中设置的默认mousewheel,并进行相关设置如下:

// respond on mousewheel spin
 this.setupmousewheelevents = function(minutesinputel, secondsinputel) {
 var isscrollingup = function(e) {
  if(e.originalevent) {
  e = e.originalevent;
  }

  // pick correct delta variable depending on event
  var delta = (e.wheeldata) ? e.wheeldata : -e.deltay;
  return (e.detail || delta > 0);
 };

 minutesinputel.bind('mousewheel wheel', function(e) {
  $scope.$apply((isscrollingup(e)) ? $scope.incrementminutes() : $scope.decrementminutes());
  e.preventdefault();
 });

 secondsinputel.bind('mousewheel wheel', function(e) {
  $scope.$apply((isscrollingup(e)) ? $scope.incrementseconds() : $scope.decrementseconds());
  e.preventdefault();
 });
 }; 

init方法最后会对inputs本身进行一些设置: 

// respond on direct input
 this.setupinputevents = function(minutesinputel, secondsinputel) {
 if($scope.readonlyinput) {
  $scope.updateminutes = angular.noop;
  $scope.updateseconds = angular.noop;
  return;
 }

 var invalidate = function(invalidminutes, invalidseconds) {
  ngmodelctrl.$setviewvalue(null);
  ngmodelctrl.$setvalidity('time', false);
  $scope.validity = false;
  if(angular.isdefined(invalidminutes)) {
  $scope.invalidminutes = invalidminutes;
  }
  if(angular.isdefined(invalidseconds)) {
  $scope.invalidseconds = invalidseconds;
  }
 };

 $scope.updateminutes = function() {
  var minutes = getminutesfromtemplate();

  if(angular.isdefined(minutes)) {
  selected.minutes = minutes;
  refresh('m');
  } else {
  invalidate(true);
  }
 };

 minutesinputel.bind('blur', function(e) {
  if(!$scope.invalidminutes && $scope.minutes < 10) {
  $scope.$apply(function() {
   $scope.minutes = pad($scope.minutes);
  });
  }
 });

 $scope.updateseconds = function() {
  var seconds = getsecondsfromtemplate();

  if(angular.isdefined(seconds)) {
  selected.seconds = seconds;
  refresh('s');
  } else {
  invalidate(undefined, true);
  }
 };

 secondsinputel.bind('blur', function(e) {
  if(!$scope.invalidseconds && $scope.seconds < 10) {
  $scope.$apply(function() {
   $scope.seconds = pad($scope.seconds);
  });
  }
 });
 }; 

此方法中,声明了用于设置输入非法的invalidate函数,它会在scope中暴露一个validity = false属性让页面有机会做出合适的反应。
 如果用户使用了一个变量来表示minutestep或者secondstep,那么还需要设置相应的watchers:

var minutestep = minutesecondpickerconfig.minutestep;
 if($attrs.minutestep) {
 $scope.parent.$watch($parse($attrs.minutestep), function(value) {
  minutestep = parseint(value, 10);
 });
 }

 var secondstep = minutesecondpickerconfig.secondstep;
 if($attrs.secondstep) {
 $scope.parent.$watch($parse($attrs.secondstep), function(value) {
  secondstep = parseint(value, 10);
 });
 } 

完整的directive实现代码如下:

var app = angular.module("minutesecondpickerdemo");

app.directive('minutesecondpicker', function() {
 return {
 restrict: 'ea',
 require: ['minutesecondpicker', '?^ngmodel'],
 controller: 'minutesecondpickercontroller',
 replace: true,
 scope: {
  validity: '='
 },
 templateurl: 'partials/directives/minutesecondpicker.html',
 link: function(scope, element, attrs, ctrls) {
  var minutesecondpickerctrl = ctrls[0],
  ngmodelctrl = ctrls[1];

  if(ngmodelctrl) {
  minutesecondpickerctrl.init(ngmodelctrl, element.find('input'));
  }
 }
 };
});

app.constant('minutesecondpickerconfig', {
 minutestep: 1,
 secondstep: 1,
 readonlyinput: false,
 mousewheel: true
});

app.controller('minutesecondpickercontroller', ['$scope', '$attrs', '$parse', 'minutesecondpickerconfig', 
 function($scope, $attrs, $parse, minutesecondpickerconfig) {

 var selected = {
  minutes: 0,
  seconds: 0
 },
 ngmodelctrl = {
  $setviewvalue: angular.noop
 };

 this.init = function(ngmodelctrl_, inputs) {
 ngmodelctrl = ngmodelctrl_;
 ngmodelctrl.$render = this.render;

 var minutesinputel = inputs.eq(0),
  secondsinputel = inputs.eq(1);

 var mousewheel = angular.isdefined($attrs.mousewheel) ? 
  $scope.$parent.$eval($attrs.mousewheel) : minutesecondpickerconfig.mousewheel;
 if(mousewheel) {
  this.setupmousewheelevents(minutesinputel, secondsinputel);
 }

 $scope.readonlyinput = angular.isdefined($attrs.readonlyinput) ?
  $scope.$parent.$eval($attrs.readonlyinput) : minutesecondpickerconfig.readonlyinput;
 this.setupinputevents(minutesinputel, secondsinputel);
 };

 var minutestep = minutesecondpickerconfig.minutestep;
 if($attrs.minutestep) {
 $scope.parent.$watch($parse($attrs.minutestep), function(value) {
  minutestep = parseint(value, 10);
 });
 }

 var secondstep = minutesecondpickerconfig.secondstep;
 if($attrs.secondstep) {
 $scope.parent.$watch($parse($attrs.secondstep), function(value) {
  secondstep = parseint(value, 10);
 });
 }

 // respond on mousewheel spin
 this.setupmousewheelevents = function(minutesinputel, secondsinputel) {
 var isscrollingup = function(e) {
  if(e.originalevent) {
  e = e.originalevent;
  }

  // pick correct delta variable depending on event
  var delta = (e.wheeldata) ? e.wheeldata : -e.deltay;
  return (e.detail || delta > 0);
 };

 minutesinputel.bind('mousewheel wheel', function(e) {
  $scope.$apply((isscrollingup(e)) ? $scope.incrementminutes() : $scope.decrementminutes());
  e.preventdefault();
 });

 secondsinputel.bind('mousewheel wheel', function(e) {
  $scope.$apply((isscrollingup(e)) ? $scope.incrementseconds() : $scope.decrementseconds());
  e.preventdefault();
 });
 };

 // respond on direct input
 this.setupinputevents = function(minutesinputel, secondsinputel) {
 if($scope.readonlyinput) {
  $scope.updateminutes = angular.noop;
  $scope.updateseconds = angular.noop;
  return;
 }

 var invalidate = function(invalidminutes, invalidseconds) {
  ngmodelctrl.$setviewvalue(null);
  ngmodelctrl.$setvalidity('time', false);
  $scope.validity = false;
  if(angular.isdefined(invalidminutes)) {
  $scope.invalidminutes = invalidminutes;
  }
  if(angular.isdefined(invalidseconds)) {
  $scope.invalidseconds = invalidseconds;
  }
 };

 $scope.updateminutes = function() {
  var minutes = getminutesfromtemplate();

  if(angular.isdefined(minutes)) {
  selected.minutes = minutes;
  refresh('m');
  } else {
  invalidate(true);
  }
 };

 minutesinputel.bind('blur', function(e) {
  if(!$scope.invalidminutes && $scope.minutes < 10) {
  $scope.$apply(function() {
   $scope.minutes = pad($scope.minutes);
  });
  }
 });

 $scope.updateseconds = function() {
  var seconds = getsecondsfromtemplate();

  if(angular.isdefined(seconds)) {
  selected.seconds = seconds;
  refresh('s');
  } else {
  invalidate(undefined, true);
  }
 };

 secondsinputel.bind('blur', function(e) {
  if(!$scope.invalidseconds && $scope.seconds < 10) {
  $scope.$apply(function() {
   $scope.seconds = pad($scope.seconds);
  });
  }
 });
 };

 this.render = function() {
 var time = ngmodelctrl.$modelvalue ? {
  minutes: ngmodelctrl.$modelvalue.minutes,
  seconds: ngmodelctrl.$modelvalue.seconds
 } : null;

 // adjust the time for invalid value at first time
 if(time.minutes < 0) {
  time.minutes = 0;
 }
 if(time.seconds < 0) {
  time.seconds = 0;
 }

 var totalseconds = time.minutes * 60 + time.seconds;
 time = {
  minutes: math.floor(totalseconds / 60),
  seconds: totalseconds % 60
 };

 if(time) {
  selected = time;
  makevalid();
  updatetemplate();
 }
 };

 // call internally when the model is valid
 function refresh(keyboardchange) {
 makevalid();
 ngmodelctrl.$setviewvalue({
  minutes: selected.minutes,
  seconds: selected.seconds
 });
 updatetemplate(keyboardchange);
 }

 function makevalid() {
 ngmodelctrl.$setvalidity('time', true);
 $scope.validity = true;
 $scope.invalidminutes = false;
 $scope.invalidseconds = false;
 }

 function updatetemplate(keyboardchange) {
 var minutes = selected.minutes,
  seconds = selected.seconds;

 $scope.minutes = keyboardchange === 'm' ? minutes : pad(minutes);
 $scope.seconds = keyboardchange === 's' ? seconds : pad(seconds);
 }

 function pad(value) {
 return ( angular.isdefined(value) && value.tostring().length < 2 ) ? '0' + value : value;
 }

 function getminutesfromtemplate() {
 var minutes = parseint($scope.minutes, 10);
 return (minutes >= 0) ? minutes : undefined;
 }

 function getsecondsfromtemplate() {
 var seconds = parseint($scope.seconds, 10);
 if(seconds >= 60) {
  seconds = 59;
 }

 return (seconds >= 0) ? seconds : undefined;
 }

 $scope.incrementminutes = function() {
 addseconds(minutestep * 60);
 };

 $scope.decrementminutes = function() {
 addseconds(-minutestep * 60);
 };

 $scope.incrementseconds = function() {
 addseconds(secondstep);
 };

 $scope.decrementseconds = function() {
 addseconds(-secondstep);
 };

 function addseconds(seconds) {
 var newseconds = selected.minutes * 60 + selected.seconds + seconds;
 if(newseconds < 0) {
  newseconds = 0;
 }

 selected = {
  minutes: math.floor(newseconds / 60),
  seconds: newseconds % 60
 };

 refresh();
 }

 $scope.previewtime = function(minutes, seconds) {
 var totalseconds = parseint(minutes, 10) * 60 + parseint(seconds, 10),
  hh = pad(math.floor(totalseconds / 3600)),
  mm = pad(minutes % 60),
  ss = pad(seconds);

 return hh + ':' + mm + ':' + ss;
 };
}]); 

对应的template实现: 

<table>
 <tbody>
 <tr class="text-center">
  <td>
  <a ng-click="incrementminutes()" class="btn btn-link">
   <span class="glyphicon glyphicon-chevron-up"></span>
  </a>
  </td>
  <td> </td>
  <td>
  <a ng-click="incrementseconds()" class="btn btn-link">
   <span class="glyphicon glyphicon-chevron-up"></span>
  </a>
  </td>
  <td> </td>
 </tr>
 <tr>
  <td style="width:50px;" class="form-group" ng-class="{'has-error': invalidminutes}">
  <input type="text" ng-model="minutes" ng-change="updateminutes()" class="form-control text-center" ng-mousewheel="incrementminutes()" ng-readonly="readonlyinput" maxlength="3">
  </td>
  <td>:</td>
  <td style="width:50px;" class="form-group" ng-class="{'has-error': invalidseconds}">
  <input type="text" ng-model="seconds" ng-change="updateseconds()" class="form-control text-center" ng-mousewheel="incrementseconds()" ng-readonly="readonlyinput" maxlength="2">
  <td>
  <!-- preview column -->
  <td>
  <span class="label label-primary" ng-show="validity">
   {{ previewtime(minutes, seconds) }}
  </span>
  </td>
 </tr>
 <tr class="text-center">
  <td>
  <a ng-click="decrementminutes()" class="btn btn-link">
   <span class="glyphicon glyphicon-chevron-down"></span>
  </a>
  </td>
  <td> </td>
  <td>
  <a ng-click="decrementseconds()" class="btn btn-link">
   <span class="glyphicon glyphicon-chevron-down"></span>
  </a>
  </td>
  <td> </td>
 </tr>
 </tbody>
</table> 

测试代码(即前面截图dialog的源代码):

 <div class="modal-header">
 <h3 class="modal-title">highlight on <span class="label label-primary">{{ moviename }}</span></h3>
</div>
<div class="modal-body">

 <div class="row">
 <div id="highlight-start" class="col-xs-6">
  <h4>start time:</h4>
  <minute-second-picker ng-model="starttime" validity="starttimevalidity"></minute-second-picker>
 </div>

 <div id="highlight-end" class="col-xs-6">
  <h4>end time:</h4>
  <minute-second-picker ng-model="endtime" validity="endtimevalidity"></minute-second-picker>
 </div>
 </div>
 <div class="row">
 <div class="col-xs-2">
  tags:
 </div>
 <div class="col-xs-10">
  <tags model="tags" src="s as s.name for s in sourcetags" options="{ addable: 'true' }"></tags>
 </div>
 </div>
</div>
<div class="modal-footer">
 <button class="btn btn-primary" ng-click="ok()" ng-disabled="!starttimevalidity || !endtimevalidity || durationincorrect(endtime, starttime)">ok</button>
 <button class="btn btn-warning" ng-click="cancel()">cancel</button>
</div>

如果大家还想深入学习,可以点击进行学习,再为大家附3个精彩的专题:

bootstrap学习教程

bootstrap实战教程

bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。