我会尝试解释我的困惑。所以我正在使用角度ui自举工具和角度ui网格。在我的网格中，我有一个带日期选择器的列。使用angular-ui-bootstrap 1.3.3我的日期选择器工作得很好但是使用angular-ui-bootstrap 2.2.0我根本看不到我的日期选择器。看起来它已被加载但由于某种原因它被隐藏了。我通过文档和更改日志，并没有找到任何在UI端完成的事情。我需要使用lib 2.2.0，因为它对我的应用程序中的其他ui元素很重要，例如modals和uib-accordion。这是我的问题，我错过了什么，你是否需要使用一些具体的＆＃34; new＆＃34;标记最新的库？
这是plunker with example。要看到我的误解，你只需要评论lib 1.3.3并取消注释lib 2.2.0。我感谢任何帮助。
自定义指令代码：
$scope.gridOptions = {
enableFiltering: true,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
},
columnDefs: [
{
field: 'DATE_TIME',
displayName: 'Date Time',
enableFiltering: true,
enableCellEdit: false,
filterHeaderTemplate: '<div class="ui-grid-filter-container row"><div ng-repeat="colFilter in col.filters" class="col-md-6 col-md-offset-0 col-sm-6 col-sm-offset-0 col-xs-6 col-xs-offset-0"><div custom-grid-date-filter-header></div></div></div>',
filters: [
{
name: 'From',
condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL
},
{
name: 'To',
condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL
}
],
cellFilter: 'date:"M/d/yyyy h:mm:ss a"',
width: '40%'
},
{
field: 'QTY',
displayName: 'Quantity',
enableCellEdit: false,
enableFiltering: false
},
{
field: 'UNIT_COST',
displayName: 'Unit Cost',
enableCellEdit: false,
enableFiltering: false
},
{
field: 'TOTAL_COST',
displayName: 'Total Cost',
enableCellEdit: false,
enableFiltering: false
}
]
};
$http.get('grid-data.json')
.success(function(data) {
$scope.gridOptions.data = data;
_.forEach($scope.gridOptions.data, function (val) {
val.DATE_TIME = new Date(val.DATE_TIME);
});
});
}])
.controller('gridDatePickerFilterCtrl', ['$scope', '$timeout', '$uibModal', 'uiGridConstants', function( $scope, $timeout, $uibModal, uiGridConstants) {
$timeout(function() {
console.log($scope.col);
var field = $scope.col.colDef.name;
var allDates = _.map($scope.col.grid.appScope.gridOptions.data, function(datum) {
return datum[field];
});
var minDate = _.min(allDates);
var maxDate = _.max(allDates);
$scope.openDatePicker = function(filter) {
var modalInstance = $uibModal.open({
templateUrl: 'custom-date-filter.html',
controller: 'customGridDateFilterModalCtrl as custom',
size: 'md',
windowClass: 'custom-date-filter-modal',
resolve: {
filterName: [function() {
return filter.name;
}],
minDate: [function() {
return new Date(minDate);
}],
maxDate: [function() {
return new Date(maxDate);
}],
}
});
modalInstance.result.then(function(selectedDate) {
console.log('date', selectedDate);
$scope.colFilter.listTerm = [];
console.log(typeof selectedDate);
console.log(selectedDate instanceof Date);
$scope.colFilter.term = selectedDate;
});
};
});
}])
.controller('customGridDateFilterModalCtrl', ['$scope', '$rootScope', '$log', '$uibModalInstance', 'filterName', 'minDate', 'maxDate', function($scope, $rootScope, $log, $uibModalInstance, filterName, minDate, maxDate) {
var ctrl = this;
console.log('filter name', filterName);
console.log('min date', minDate, 'max date', maxDate);
ctrl.title = 'Select Dates ' + filterName + '...';
ctrl.minDate = minDate;
ctrl.maxDate = maxDate;
ctrl.customDateFilterForm;
ctrl.filterDate = (filterName.indexOf('From') !== -1) ? angular.copy(ctrl.minDate) : angular.copy(ctrl.maxDate);
function setDateToStartOfDay(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
}
function setDateToEndOfDay(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);
}
ctrl.filterDateChanged = function () {
ctrl.filterDate = (filterName.indexOf('From') !== -1) ? setDateToStartOfDay(ctrl.filterDate) : setDateToEndOfDay(ctrl.filterDate);
$log.log('new filter date', ctrl.filterDate);
};
ctrl.setFilterDate = function(date) {
$uibModalInstance.close(date);
};
ctrl.cancelDateFilter = function() {
$uibModalInstance.dismiss();
};
}])
.directive('customGridDateFilterHeader', function() {
return {
template: '<button class="btn btn-default date-time-filter-buttons" style="width:90%;padding:inherit;" ng-click="openDatePicker(colFilter)">{{ colFilter.name }}</button><div role="button" class="ui-grid-filter-button-select cancel-custom-date-range-filter-button ng-scope" ng-click="removeFilter(colFilter, $index)" ng-if="!colFilter.disableCancelFilterButton" ng-disabled="colFilter.term === undefined || colFilter.term === null || colFilter.term === \'\'" ng-show="colFilter.term !== undefined && colFilter.term != null" tabindex="0" aria-hidden="false" aria-disabled="false" style=""><i class="ui-grid-icon-cancel cancel-custom-date-range-filter" ui-grid-one-bind-aria-label="aria.removeFilter" aria-label="Remove Filter"> </i></div>',
controller: 'gridDatePickerFilterCtrl'
};
})
;
picker html
<div class="modal-content col-md-12 col-md-offset-0 col-sm-12 col-sm-offset-0 col-xs-12 col-xs-offset-0">
<div class="modal-header">
<p class="modal-title well custom-date-filter-header">
<span class="custom-date-filter-title-text">
{{ custom.title }}
</span>
</p>
</div>
<div class="row modal-body custom-date-filter-container-row">
<form name="custom.customDateFilterForm"
ng-submit="custom.setFilterDate(custom.filterDate)"
no-validation>
<div class="row custom-filter-date-input-row">
<div class="well col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 custom-date-filter-input">
<uib-datepicker ng-model="custom.filterDate"
min-date="custom.minDate"
max-date="custom.maxDate"
ng-change="custom.filterDateChanged()"
class="well well-sm">
</uib-datepicker>
</div>
</div>
<div class="row modal-footer custom-date-filter-submit-buttons-row">
<div class="custom-date-filter-submit-buttons-div col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">
<button class="btn btn-success btn-lg custom-date-filter-submit-button"
type="submit">
Apply
</button>
<button type="button"
class="btn btn-warning btn-lg custom-date-filter-cancel-button"
ng-click="custom.cancelDateFilter()">
Cancel
</button>
</div>
</div>
</form>
</div>
</div>
答案 0 :(得分：1)
uibDatepicker指令已被修改，现在它包含restrict选项：
restrict: 'A'
因此，一旦迁移到2.2.0 version，日期选择器也应该被修改，因为指令仅限于属性名称
替换声明：
<uib-datepicker ng-model="custom.filterDate"
min-date="custom.minDate"
max-date="custom.maxDate"
ng-change="custom.filterDateChanged()"
class="well well-sm">
</uib-datepicker>
与
<div uib-datepicker ng-model="custom.filterDate"
min-date="custom.minDate"
max-date="custom.maxDate"
ng-change="custom.filterDateChanged()"
class="well well-sm"
</div>