将自定义数字添加到timepicker

时间:2017-02-03 10:34:47

标签: javascript angularjs twitter-bootstrap

我需要制作时间选择器,填充我从后端获得的数字。例如,后端发送给我的产品可以点亮的时间范围,意味着初始值和多长时间点亮。例, 后端发送时间为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

0 个答案:

没有答案