angularjs – 绑定角度datepicker和timepicker

发布时间：2020-12-17 17:46:00 所属栏目：安全来源：网络整理

导读：我想绑定角度timepicker和datepicker.我正在使用 Angular bootstrap library 根据timepicker的文档,它需要最小值和最大值的新Date对象. 如果我只是这样设置 var d = new Date();d.setHours( 2 );d.setMinutes( 0 );$scope.minTime = d;var d = new Date();d.

我想绑定角度timepicker和datepicker.我正在使用 Angular bootstrap library

根据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框边框变为红色(可能是由于验证错误),但没有指定错误究竟是什么.

请看看：
http://plnkr.co/edit/LOZ9T6zexRkQpqSIaJiA?p=preview

解决方法

为了根据所选日期初始化timepicker,将dateChange函数替换为：

$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>

Plunker

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!