1
私は混乱について説明しようとします。だから、角度uiのブートストラップツールと角度uiグリッドで作業しています。私のグリッドには日付ピッカーの列があります。 angle-ui-bootstrap 1.3.3では、私の日付ピッカーは素晴らしいですが、angle-ui-bootstrap 2.2.0では日付ピッカーが全く表示されません。それはロードされたように見えますが、何らかの理由で隠されています。私はdocsと変更のログを行って、UI側で行われているものは見つかりませんでした。 lib 2.2.0を使用する必要があります。これは、modalやuib-accordionなど、私のアプリケーション内の他のUI要素にとって重要なものです。そして、これは私の質問です。私は何が欠けていますか？最新のライブラリにいくつかの特定の「新しい」タグを使用する必要がありますか？日付ピッカーが新しいバージョンのangle-ui-bootstrapで動作しない2.2.0
これは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'
};
})
;
ピッカー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>
で
を！助けてくれてありがとう、私はすでにそれを解決しようと頭を壊した。 – antonyboom