Question

我需要将Bootstrap TimePicker与AngularJS一起使用。我是AngularJS的新手。

我有结束日期的编辑选项。在编辑时间选择器上显示但在AngularJS中无效。

HTML ：

    <div class="col-md-3">
        <label>End Time</label> 
         <span ng-hide="editingViewActivityForm">{{actDetailsData.endTime | date: 'shortTime'}}</span>      
           <div ng-show="editingViewActivityForm" class="input-group bootstrap-timepicker timepicker">
                <input id="timepicker1" ng-model="actDetailsData.endTime" type="text" class="form-control input-small">

<span class="input-group-addon" ng-click="openTime()">
<i class="glyphicon glyphicon-time"></i></span>
            </div>
         </div>

控制器：

angular.element(document).ready(function () {
        angular.element('#timepicker1').timepicker();
      });

Answer 1

您可以使用ui-bootstrap代替bootstrap。

首先下载 ui bootstrap然后将ui bootstrap脚本和css链接添加到您的项目。然后将ui.bootstrap添加到您的模块

angular.module('myModule', ['ui.bootstrap']);

并在最后添加像这样的datepicker：

 <input type="text" class="form-control" uib-datepicker-popup="{{format}}" 
 ng-model="dt" is-open="popup1.opened" min-date="minDate" max-date="maxDate"
 datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
 ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />

ui bootstrap datepicker in github

与angularjs的bootstrap timepicker

1 个答案: