antonyboom antonyboom - 1 month ago 9
AngularJS Question

Date Picker doesn't work with a new version of angular-ui-bootstrap 2.2.0

I will try to explain my confusions. So I'm working with angular ui bootstrap tools and angular ui grid. In my grid I have a columns with a date picker. With angular-ui-bootstrap 1.3.3 my date picker works great but with angular-ui-bootstrap 2.2.0 I cannot see my date picker at all. It looks like it has been loaded but for some reason it is hidden. I went thru docs and change log and didn't find any things that have been done on the UI side. I need to use lib 2.2.0 because it critical for other ui elements in my app, such as modals and uib-accordion. And this is my question, What am I missing and Do you I need to use some specific a "new" tag for a latest library ?

This is plunker with example. To see my misunderstandings you just need to comment lib 1.3.3 and uncomment lib 2.2.0. I appreciate any help.

Code for custom directive:

$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 &amp;&amp; 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">&nbsp;</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>

Answer

uibDatepicker directive has been modified since 1.3.3 version and now it includes restrict option:

restrict: 'A'

So, once migrated to 2.2.0 version the date picker should be modified as well since the directive is restricted to attribute name

Replace the declaration:

 <uib-datepicker ng-model="custom.filterDate" 
           min-date="custom.minDate" 
           max-date="custom.maxDate"
           ng-change="custom.filterDateChanged()"
           class="well well-sm">
  </uib-datepicker>

with

<div uib-datepicker ng-model="custom.filterDate" 
         min-date="custom.minDate" 
         max-date="custom.maxDate"
         ng-change="custom.filterDateChanged()"
         class="well well-sm"
 </div>

Updated plunker

Comments