Question

我正在使用bootstrap datetimepicker。通常它正在工作。但是在模式弹出窗口中，它不起作用。可能是什么问题。

JS：

(function() {
'use strict';

angular
    .module('app.inspection')
    .controller('mainCtrl', mainCtrl)
    .controller('scheduleModalCtrl', scheduleModalCtrl);

mainCtrl.$inject = ['$scope', '$state', '$modal'];

function mainCtrl($scope, $state, $modal) {

 $scope.schedule_modal = function() {
   var modalView = $modal.open({
   templateUrl:'schedule_modal.html',
   backdrop: 'static',
   controller: 'scheduleModalCtrl',
   windowClass: 'modal-dialog-schedule'
 });
}

scheduleModalCtrl.$inject = ['$scope', '$modalInstance'];
function scheduleModalCtrl($scope, $modalInstance) {
 $('#date').datetimepicker({
  format: 'DD/MM/YYYY'
 });
}
})();

schedule_modal.html

<div class="col-xs-12 col-sm-12 col-md-12">
 <label for="insp-date" class="label-style">Date</label>
 <div class='input-group date' id='date'>
  <input type='text' class="input-style" placeholder="dd/mm/yyyy"/>
  <span class="input-group-addon">
   <span class="glyphicon glyphicon-calendar"></span>
  </span>
 </div>
</div>

route.config.js：

.state('app.main', {
 url: '/manageinspection',
 title: 'Manage Inspection Page',
 controller: 'mainCtrl',
 templateUrl:   helper.basepath('pages/main/main.html'),
 resolve: helper.resolveFor('bootstrap','moment','bootstrapDateTimePicker')
})

我在moment.js和bootstrapDateTimePicker中加入了lazyload和route.config resolve个常量。 datetimepicker正在mainCtrl(main page)中打开。它不适用于模态弹出窗口，即scheduleModalCtrl。

我找到了几个解决方案，但它们全部用于ui-bootstarp datepicker但不适用于datetimepicker

Answer 1

您在谈论angular-bootstrap-datetimepicker吗？

如果你是，我也有同样的问题。 datepicker（使用下拉列表）在模态上永远不会正常工作（至少是bootstrap＆＃39;模态）。

我的姑息解决方案，保持一致性是＆＃34;禁用＆＃34;单击输入字段中的下拉事件。要执行下拉列表事件，我使用的是＆＃39;输入组 - 插件＆＃39;这样：

＆＃13;

<iframe width="100%" height="300" src="//jsfiddle.net/NandoMB/tLpbzkfj/27/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

＆＃13;

bootstrap datetimepicker在模态中不起作用

1 个答案: