我需要制作时间选择器,填充我从后端获得的数字。例如,后端发送给我的产品可以点亮的时间范围,意味着初始值和多长时间点亮。例, 后端发送时间为17小时,最大范围为3小时。在第一个选择器中,我们选择17,在第二个选择器中选择其最终值不应小于所选的起始值(17),并且不超过我从后端收到的最大时间范围。
这里是html
<p>From</p>
<div uib-timepicker ng-model="mytimeStart" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian" readonly-input=true></div>
<p>To</p>
<div uib-timepicker ng-model="mytimeEnd" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian" readonly-input=true></div>
<pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>
我的ctrl在这里(服务范例)
$http.get(serviceBase + 'article')
.success(function (response)
{
$scope.start= response.start;
$scope.end= response.end;
$scope.step = response.step;
$scope.mytime = new Date();
$scope.options = {
hstep: [1, 2, 3],
mstep: [1, 5, 10, 15, 25, 30]
};
$scope.hstep = 1;
$scope.mstep = 30;
$scope.ismeridian = false;
$scope.toggleMode = function() {
$scope.ismeridian = ! $scope.ismeridian;
};
$scope.update = function() {
var d = new Date();
d.setHours( 14 );
d.setMinutes( 0 );
$scope.mytime = d;
};
$scope.changed = function(){
$scope.maxTime = $scope.max;
$scope.minTime = $scope.min;
$scope.stepTime = $scope.step;
$scope.maxTimeStep = $scope.maxTime + $scope.stepTime;
console.log($scope.maxTimeStep);
};
$scope.clear = function() {
$scope.mytime = null;
};
});
如果选择的开始时间为22:00,范围为4小时,则24:00后的时间戳必须切换到01:00。选择后,在后端发送选定的值。我试过ui.bootstrap.timepicker,但我不知道如何设置自定义值,并且在经过24小时班次到01:00之后,我希望你理解,谢谢
这是[plunker] [1]
[1]: https://plnkr.co/edit/dJmNNQlJEglxi4mDp0ex?p=preview