我无法在 UI Bootstrap 模型中打开 jQuery UI 日期选择器。正常的 HTML 日期选择器正在打开，但 jQuery 日期选择器未打开。这是代码:-
测试.html
<!DOCTYPE html>
<html ng-app="appHome">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="../Scripts/AngularControllers/Test.js"></script>
<script src="../Scripts/AngularControllers/Test1.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<button type="button" ng-click="open()">Open me!</button>
</div>
</body>
</html>
测试.js
var myApp = angular.module('appHome', ['ui.bootstrap']);
myApp.controller('ModalDemoCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) {
$scope.open = function (size, parentSelector) {
var modalInstance = $uibModal.open({
templateUrl: 'Test1.html',
controller: 'ModalDemoCtrl1',
size :'lg'
});
};
}])
测试1.html
<div>
<h1>Modal Body</h1>
<input type="date" />
Date of Birth<input type="text" class="datepicker-ui" id="dateDOB" ng-model="dob">
</div>
测试1。 js
var myApp = angular.module('appHome');
myApp.controller('ModalDemoCtrl1', ['$scope', function ($scope) {
$(".datepicker-ui").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
yearRange: "-100:+0",
stepMonths: 1,
onSelect: function (date) {
if (this.id == "dateDOB") {
$scope.dob = date;
$scope.$apply();
}
}
});
}])
请在浏览器中呈现 HTML 页面的屏幕截图如下:-
测试.html
点击“打开我”按钮后
在这里您可以看到正常的 HTML Date 控件正在工作，但 jQuery UI Datepicker 却没有。
请帮助我使 jQuery UI 日期选择器在 Modal 中工作。
最佳答案
修改:
- 升级了脚本版本。
- 使用 $modal 服务代替 $uibModal 显示弹出窗口。
@user1843970，为了使其顺利工作，请按如下方式替换文件的代码:
Test.html
<!DOCTYPE html>
<html ng-app="appHome">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.7.0.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="../Scripts/AngularControllers/Test.js"></script>
<script src="../Scripts/AngularControllers/Test1.js"></script>
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
Test.js
var myApp = angular.module('appHome', ['ui.bootstrap']);
myApp.controller('ModalDemoCtrl', ['$scope', '$modal', function ($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'Test1.html',
controller: 'ModalInstanceCtrl'
});
modalInstance.result.then(function (selected) {
$scope.selected = selected;
}, function () {
console.log('Modal dismissed at: ' + new Date());
});
};
}])
Test1.html
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body" style="height:600px;">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<div class="form-horizontal">
<div class="input-group">
<input type="text" class="form-control" datepicker-popup="dd.mm.yyyy" ng-model="dt" is-open="$parent.opened" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button style="height:34px;" class="btn calendar btn-default" ng-click="open()">
</span>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
Test1.js
var myApp = angular.module('appHome');
myApp.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', '$timeout', function ($scope, $modalInstance, $timeout) {
$scope.dt = new Date();
$scope.open = function () {
$timeout(function () {
$scope.opened = true;
});
};
$scope.ok = function () {
$modalInstance.close($scope.dt);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}])
关于jQuery UI Datepicker 无法在 Angular JS UI Bootstrap 模式中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44450454/