大佬教程收集整理的这篇文章主要介绍了angularjs – 绑定角度datepicker和timepicker，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
根据timepicker的文档,它需要最小值和最大值的新Date对象.
如果我只是这样设置
var d = new Date(); d.setHours( 2 ); d.setMinutes( 0 ); $scope.minTime = d; var d = new Date(); d.setHours( 11 ); d.setMinutes( 0 ); $scope.maxTime = d; <uib-timepicker ng-model="mytime" min="min" max="max" show-meridian="false" min="minTime" max="maxTime"></uib-timepicker>
由于新的Date()对象,这仅适用于今天.
我想让它在我选择的任何一天工作.目前,timepicker不会根据需要限制时间.此外,有时timepicker框边框变为红色(可能是由于验证错误),但没有指定错误究竟是什么.
$scope.dateChange = function() {
var selectedDate = $scope.dt;
var min = new Date(selectedDate.getTime());
min.setHours(2);
min.setMinutes(0);
$scope.min = min;
var max = new Date(selectedDate.getTime());
max.setHours(4);
max.setMinutes(0);
$scope.max = max;
}
工作实例
angular.module('ui.bootstrap.demo',['ngAnimate','ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl',function($scope) {
$scope.format = 'yyyy/MM/dd';
$scope.min = null;
$scope.max = null;
$scope.initTimePicker = function(selectedDate) {
var min = new Date(selectedDate.getTime());
min.setHours(2);
min.setMinutes(0);
$scope.min = min;
var max = new Date(selectedDate.getTime());
max.setHours(4);
max.setMinutes(0);
$scope.max = max;
}
$scope.init = function() {
$scope.dt = new Date();
$scope.initTimePicker($scope.dt);
};
$scope.init();
$scope.clear = function() {
$scope.dt = null;
};
$scope.open = function() {
$scope.popup.opened = true;
};
$scope.popup = {
opened: false
};
$scope.dateChange = function() {
$scope.initTimePicker($scope.dt);
}
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="ui.bootstrap.demo" ng-controller="DatepickerDemoCtrl">
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup.opened" datepicker-options="dateOptions"
ng-required="true" close-text="Close" ng-change="dateChange()" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<uib-timepicker ng-model="dt" hour-step="1" minute-step="15" name="sTime" show-meridian="true" min="min" max="max">
</uib-timepicker>
<pre class="alert alert-info">Time is: {{dt | date:'M/d/yyyy HH:mm' }}</pre>
</div>
以上是大佬教程为你收集整理的angularjs – 绑定角度datepicker和timepicker全部内容，希望文章能够帮你解决angularjs – 绑定角度datepicker和timepicker所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。