Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(datepicker): option whether to display button bar in popup
Browse files Browse the repository at this point in the history
  • Loading branch information
bekos committed Nov 27, 2013
1 parent 9ec2128 commit 4d158e0
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 18 deletions.
15 changes: 8 additions & 7 deletions src/datepicker/datepicker.js
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.position'])
clearText: 'Clear',
closeText: 'Done',
closeOnDateSelection: true,
appendToBody: false
appendToBody: false,
showButtonBar: true
})

.directive('datepickerPopup', ['$compile', '$parse', '$document', '$position', 'dateFilter', 'datepickerPopupConfig', 'datepickerConfig',
Expand All @@ -267,17 +268,17 @@ function ($compile, $parse, $document, $position, dateFilter, datepickerPopupCon
restrict: 'EA',
require: 'ngModel',
link: function(originalScope, element, attrs, ngModel) {
var dateFormat;
var scope = originalScope.$new(), // create a child scope so we are not polluting original one
dateFormat,
closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? originalScope.$eval(attrs.closeOnDateSelection) : datepickerPopupConfig.closeOnDateSelection,
appendToBody = angular.isDefined(attrs.datepickerAppendToBody) ? originalScope.$eval(attrs.datepickerAppendToBody) : datepickerPopupConfig.appendToBody;

attrs.$observe('datepickerPopup', function(value) {
dateFormat = value || datepickerPopupConfig.dateFormat;
ngModel.$render();
});

var closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? originalScope.$eval(attrs.closeOnDateSelection) : datepickerPopupConfig.closeOnDateSelection;
var appendToBody = angular.isDefined(attrs.datepickerAppendToBody) ? originalScope.$eval(attrs.datepickerAppendToBody) : datepickerPopupConfig.appendToBody;

// create a child scope for the datepicker directive so we are not polluting original scope
var scope = originalScope.$new();
scope.showButtonBar = angular.isDefined(attrs.showButtonBar) ? originalScope.$eval(attrs.showButtonBar) : datepickerPopupConfig.showButtonBar;

originalScope.$on('$destroy', function() {
scope.$destroy();
Expand Down
11 changes: 8 additions & 3 deletions src/datepicker/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ Everything is formatted using the [date filter](http://docs.angularjs.org/api/ng

### Datepicker Settings ###

All settings can be provided as attributes in the `<datepicker>` or globally configured through the `datepickerConfig`. `datepicker-popup` options may be provided as attributes in the `datepicker-popup`'s element, or globally configured through the `datepickerPopupConfig`.
All settings can be provided as attributes in the `<datepicker>` or globally configured through the `datepickerConfig`.

* `ng-model` <i class="icon-eye-open"></i>
:
The date object.
Expand Down Expand Up @@ -64,12 +65,16 @@ All settings can be provided as attributes in the `<datepicker>` or globally con
### Popup Settings ###

Options for datepicker can be passed as JSON using the `datepicker-options` attribute.
Specific settings for the `datepicker-popup` are:
Specific settings for the `datepicker-popup`, that can globally configured through the `datepickerPopupConfig`, are:

* `datepicker-popup`
_(Default: 'yyyy-MM-dd')_ :
The format for displayed dates.

* `show-button-bar`
_(Default: true)_ :
Whether to display a button bar underneath the datepicker.

* `current-text`
_(Default: 'Today')_ :
The text to display for the current day button.
Expand All @@ -89,7 +94,7 @@ Specific settings for the `datepicker-popup` are:
* `close-on-date-selection`
_(Default: true)_ :
Whether to close calendar when a date is chosen.

* `datepicker-append-to-body`
_(Default: false)_:
Append the datepicker popup element to `body`, rather than inserting after `datepicker-popup`. For global configuration, use `datepickerPopupConfig.appendToBody`.
22 changes: 16 additions & 6 deletions src/datepicker/test/datepicker.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -1137,15 +1137,20 @@ describe('datepicker directive', function () {
});

describe('button bar', function() {
var buttons;
var buttons, buttonBarElement;
beforeEach(inject(function() {
assignButtons();
assignButtonBar();
}));

function assignButtons() {
buttons = dropdownEl.find('li').eq(2).find('button');
function assignButtonBar() {
buttonBarElement = dropdownEl.find('li').eq(-1);
buttons = buttonBarElement.find('button');
}

it('should be visible', function() {
expect(buttonBarElement.css('display')).not.toBe('none');
});

it('should have four buttons', function() {
expect(buttons.length).toBe(4);

Expand All @@ -1170,12 +1175,13 @@ describe('datepicker directive', function () {

describe('customization', function() {
beforeEach(inject(function() {
$rootScope.showBar = false;
$rootScope.clearText = 'Null it!';
$rootScope.close = 'Close';
var wrapElement = $compile('<div><input ng-model="date" datepicker-popup current-text="Now" toggle-weeks-text="T.W." clear-text="{{clearText}}" close-text="{{close}}ME"><div>')($rootScope);
var wrapElement = $compile('<div><input ng-model="date" datepicker-popup current-text="Now" toggle-weeks-text="T.W." clear-text="{{clearText}}" close-text="{{close}}ME" show-button-bar="showBar"><div>')($rootScope);
$rootScope.$digest();
assignElements(wrapElement);
assignButtons();
assignButtonBar();
}));

it('should change text from attributes', function() {
Expand All @@ -1184,6 +1190,10 @@ describe('datepicker directive', function () {
expect(buttons.eq(2).text()).toBe('Null it!');
expect(buttons.eq(3).text()).toBe('CloseME');
});

it('should hide bar', function() {
expect(buttonBarElement.css('display')).toBe('none');
});
});
});

Expand Down
3 changes: 1 addition & 2 deletions template/datepicker/popup.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<ul class="dropdown-menu" ng-style="{display: (isOpen && 'block') || 'none', top: position.top+'px', left: position.left+'px'}">
<li ng-transclude></li>
<li class="divider"></li>
<li style="padding: 9px;">
<li ng-show="showButtonBar" style="padding:10px 9px 2px">
<span class="btn-group">
<button type="button" class="btn btn-small btn-inverse" ng-click="today()">{{currentText}}</button>
<button type="button" class="btn btn-small btn-info" ng-click="showWeeks = ! showWeeks" ng-class="{active: showWeeks}">{{toggleWeeksText}}</button>
Expand Down

0 comments on commit 4d158e0

Please sign in to comment.