-
+
@@ -294,7 +338,7 @@ {{buildErrorText}}
style="width: 33%; border-radius: 0;" ng-class="{'btn-primary': module.<%= module.name %>}" ng-model="module.<%= module.name %>" - btn-checkbox + uib-btn-checkbox ng-change="selectedChanged('<%= module.name %>', module.<%= module.name %>)"> <%= module.displayName %> diff --git a/package.json b/package.json index 700ecc406c..ca5cfe407d 100644 --- a/package.json +++ b/package.json @@ -1,36 +1,61 @@ { "author": "https://github.com/angular-ui/bootstrap/graphs/contributors", "name": "angular-ui-bootstrap", - "version": "0.13.1-SNAPSHOT", + "version": "2.5.4", + "description": "Native AngularJS (Angular) directives for Bootstrap", "homepage": "http://angular-ui.github.io/bootstrap/", + "keywords": [ + "angularjs", + "angular", + "bootstrap", + "ui" + ], "dependencies": {}, + "directories": { + "lib": "src/" + }, + "files": [ + "index.js", + "dist/", + "src/", + "template/" + ], + "main": "index.js", + "scripts": { + "demo": "grunt after-test && static dist -a 0.0.0.0 -H '{\"Cache-Control\": \"no-cache, must-revalidate\"}'", + "test": "grunt" + }, "repository": { "type": "git", "url": "https://github.com/angular-ui/bootstrap.git" }, "devDependencies": { - "angular": "<=1.3.x", - "angular-mocks": "<=1.3.x", + "angular": "1.6.1", + "angular-mocks": "1.6.1", + "angular-sanitize": "1.6.1", "grunt": "^0.4.5", - "grunt-contrib-concat": "^0.5.1", - "grunt-contrib-copy": "^0.8.0", - "grunt-contrib-jshint": "^0.11.1", - "grunt-contrib-uglify": "^0.8.0", - "grunt-contrib-watch": "^0.6.1", - "grunt-conventional-changelog": "^1.1.0", + "grunt-cli": "^1.2.0", + "grunt-contrib-concat": "^1.0.0", + "grunt-contrib-copy": "^1.0.0", + "grunt-contrib-uglify": "^1.0.1", + "grunt-contrib-watch": "^1.0.0", + "grunt-conventional-changelog": "^6.1.0", "grunt-ddescribe-iit": "0.0.6", + "grunt-eslint": "^17.3.1", "grunt-html2js": "^0.3.0", - "grunt-karma": "^0.10.1", - "grunt-ngdocs": "~0.1.1", + "grunt-karma": "^0.12.0", "jasmine-core": "^2.2.0", - "karma": "^0.12.31", - "karma-chrome-launcher": "^0.1.7", - "karma-coverage": "^0.2.7", + "karma": "0.13.22", + "karma-chrome-launcher": "^0.2.0", + "karma-coverage": "^0.5.0", "karma-firefox-launcher": "^0.1.4", "karma-jasmine": "^0.3.5", - "node-markdown": "0.1.1", - "semver": "^4.3.3", - "shelljs": "^0.4.0" + "load-grunt-tasks": "^3.3.0", + "lodash": "^4.1.0", + "marked": "^0.3.5", + "node-static": "^0.7.8", + "semver": "^5.0.1", + "shelljs": "^0.6.0" }, "license": "MIT" } diff --git a/src/accordion/accordion.js b/src/accordion/accordion.js index a177931eec..9b07a96131 100644 --- a/src/accordion/accordion.js +++ b/src/accordion/accordion.js @@ -1,20 +1,20 @@ -angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse']) +angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse', 'ui.bootstrap.tabindex']) -.constant('accordionConfig', { +.constant('uibAccordionConfig', { closeOthers: true }) -.controller('AccordionController', ['$scope', '$attrs', 'accordionConfig', function ($scope, $attrs, accordionConfig) { - +.controller('UibAccordionController', ['$scope', '$attrs', 'uibAccordionConfig', function($scope, $attrs, accordionConfig) { // This array keeps track of the accordion groups this.groups = []; // Ensure that all the groups in this accordion are closed, unless close-others explicitly says not to this.closeOthers = function(openGroup) { - var closeOthers = angular.isDefined($attrs.closeOthers) ? $scope.$eval($attrs.closeOthers) : accordionConfig.closeOthers; - if ( closeOthers ) { - angular.forEach(this.groups, function (group) { - if ( group !== openGroup ) { + var closeOthers = angular.isDefined($attrs.closeOthers) ? + $scope.$eval($attrs.closeOthers) : accordionConfig.closeOthers; + if (closeOthers) { + angular.forEach(this.groups, function(group) { + if (group !== openGroup) { group.isOpen = false; } }); @@ -26,7 +26,7 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse']) var that = this; this.groups.push(groupScope); - groupScope.$on('$destroy', function (event) { + groupScope.$on('$destroy', function(event) { that.removeGroup(groupScope); }); }; @@ -34,35 +34,37 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse']) // This is called from the accordion-group directive when to remove itself this.removeGroup = function(group) { var index = this.groups.indexOf(group); - if ( index !== -1 ) { + if (index !== -1) { this.groups.splice(index, 1); } }; - }]) // The accordion directive simply sets up the directive controller // and adds an accordion CSS class to itself element. -.directive('accordion', function () { +.directive('uibAccordion', function() { return { - restrict:'EA', - controller:'AccordionController', + controller: 'UibAccordionController', + controllerAs: 'accordion', transclude: true, - replace: false, - templateUrl: 'template/accordion/accordion.html' + templateUrl: function(element, attrs) { + return attrs.templateUrl || 'uib/template/accordion/accordion.html'; + } }; }) // The accordion-group directive indicates a block of html that will expand and collapse in an accordion -.directive('accordionGroup', function() { +.directive('uibAccordionGroup', function() { return { - require:'^accordion', // We need this directive to be inside an accordion - restrict:'EA', - transclude:true, // It transcludes the contents of the directive into the template - replace: true, // The element containing the directive will be replaced with the template - templateUrl:'template/accordion/accordion-group.html', + require: '^uibAccordion', // We need this directive to be inside an accordion + transclude: true, // It transcludes the contents of the directive into the template + restrict: 'A', + templateUrl: function(element, attrs) { + return attrs.templateUrl || 'uib/template/accordion/accordion-group.html'; + }, scope: { heading: '@', // Interpolate the heading attribute onto this scope + panelClass: '@?', // Ditto with panelClass isOpen: '=?', isDisabled: '=?' }, @@ -72,35 +74,41 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse']) }; }, link: function(scope, element, attrs, accordionCtrl) { + element.addClass('panel'); accordionCtrl.addGroup(scope); + scope.openClass = attrs.openClass || 'panel-open'; + scope.panelClass = attrs.panelClass || 'panel-default'; scope.$watch('isOpen', function(value) { - if ( value ) { + element.toggleClass(scope.openClass, !!value); + if (value) { accordionCtrl.closeOthers(scope); } }); - scope.toggleOpen = function() { - if ( !scope.isDisabled ) { - scope.isOpen = !scope.isOpen; + scope.toggleOpen = function($event) { + if (!scope.isDisabled) { + if (!$event || $event.which === 32) { + scope.isOpen = !scope.isOpen; + } } }; + + var id = 'accordiongroup-' + scope.$id + '-' + Math.floor(Math.random() * 10000); + scope.headingId = id + '-tab'; + scope.panelId = id + '-panel'; } }; }) // Use accordion-heading below an accordion-group to provide a heading containing HTML -//
-//
-// ...
-//
-.directive('accordionTransclude', function() {
+.directive('uibAccordionTransclude', function() {
return {
- require: '^accordionGroup',
- link: function(scope, element, attr, controller) {
- scope.$watch(function() { return controller[attr.accordionTransclude]; }, function(heading) {
- if ( heading ) {
- element.html('');
- element.append(heading);
+ require: '^uibAccordionGroup',
+ link: function(scope, element, attrs, controller) {
+ scope.$watch(function() { return controller[attrs.uibAccordionTransclude]; }, function(heading) {
+ if (heading) {
+ var elem = angular.element(element[0].querySelector(getHeaderSelectors()));
+ elem.html('');
+ elem.append(heading);
}
});
}
};
-})
-;
+ function getHeaderSelectors() {
+ return 'uib-accordion-header,' +
+ 'data-uib-accordion-header,' +
+ 'x-uib-accordion-header,' +
+ 'uib\\:accordion-header,' +
+ '[uib-accordion-header],' +
+ '[data-uib-accordion-header],' +
+ '[x-uib-accordion-header]';
+ }
+});
diff --git a/src/accordion/docs/demo.html b/src/accordion/docs/demo.html
index aff59fdfab..2b119b3e5e 100644
--- a/src/accordion/docs/demo.html
+++ b/src/accordion/docs/demo.html
@@ -1,30 +1,60 @@
+
+
-
+
+
+ - - + +
- -
+
+
+
This content is straight in the template.
-
-
+
+
{{group.content}}
-
-
-
-
-
- I can have markup, too!
-
- This is just some content to illustrate fancy headings.
-
-
-
\ No newline at end of file
+ The body of the accordion group grows to fit the contents
- -{{item}}
-
+
+ The body of the uib-accordion group grows to fit the contents
+ +{{item}}
+
+ Hello
+
+
+
+ Custom template with custom header template
+
+ World
+
+
+
+ Please, to delete your account, click the button below
+ +
+
+ I can have markup, too!
+
+ This is just some content to illustrate fancy headings.
+
+
+
diff --git a/src/accordion/docs/demo.js b/src/accordion/docs/demo.js
index 390bc03031..8922f7ed29 100644
--- a/src/accordion/docs/demo.js
+++ b/src/accordion/docs/demo.js
@@ -20,6 +20,7 @@ angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($s
};
$scope.status = {
+ isCustomHeaderOpen: false,
isFirstOpen: true,
isFirstDisabled: false
};
diff --git a/src/accordion/docs/readme.md b/src/accordion/docs/readme.md
index 1a67460cbe..25f790c3fa 100644
--- a/src/accordion/docs/readme.md
+++ b/src/accordion/docs/readme.md
@@ -1,10 +1,49 @@
The **accordion directive** builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.
-We can control whether expanding an item will cause the other items to close, using the `close-others` attribute on accordion.
+The body of each accordion group is transcluded into the body of the collapsible element.
-The body of each accordion group is transcluded in to the body of the collapsible element.
+### uib-accordion settings
-### Accordion Settings ###
+* `close-others`
+ $
+ C
+ _(Default: `true`)_ -
+ Control whether expanding an item will cause the other items to close.
- * `is-open` (Defaults: false) :
- Whether accordion group is open or closed.
+* `template-url`
+ _(Default: `template/accordion/accordion.html`)_ -
+ Add the ability to override the template used on the component.
+
+### uib-accordion-group settings
+
+* `heading`
+ _(Default: `none`)_ -
+ The clickable text on the group's header. You need one to be able to click on the header for toggling.
+
+* `is-disabled`
+ $
+
+ _(Default: `false`)_ -
+ Whether the accordion group is disabled or not.
+
+* `is-open`
+ $
+
+ _(Default: `false`)_ -
+ Whether accordion group is open or closed.
+
+* `template-url`
+ _(Default: `uib/template/accordion/accordion-group.html`)_ -
+ Add the ability to override the template used on the component.
+
+### Accordion heading
+
+Instead of the `heading` attribute on the `uib-accordion-group`, you can use an `uib-accordion-heading` element inside a group that will be used as the group's header.
+
+If you're using a custom template for the `uib-accordion-group`, you'll need to have an element for the heading to be transcluded into using `uib-accordion-header` (e.g. ``).
+
+### Known issues
+
+To use clickable elements within the accordion, you have to override the accordion-group template to use div elements instead of anchor elements, and add `cursor: pointer` in your CSS. This is due to browsers interpreting anchor elements as the target of any click event, which triggers routing when certain elements such as buttons are nested inside the anchor element.
+
+If custom classes on the accordion-group element are desired, one needs to either modify the template to remove the `ng-class` usage in the accordion-group template and use ng-class on the accordion-group element (not recommended), or use an interpolated expression in the class attribute, i.e. `{{accordion.text}}
');
+
+ element = $compile('foo
');
+ });
+
+ it('should allow custom templates', function() {
+ $templateCache.put('foo/bar.html', 'baz
');
+
+ element = $compile('baz
');
+ });
+ });
+
+ describe('uib-accordion-group', function() {
var scope, $compile;
var element, groups;
- var findGroupLink = function (index) {
- return groups.eq(index).find('a').eq(0);
+ var findGroupHeading = function(index) {
+ return groups.eq(index).find('.panel-heading').eq(0);
+ };
+ var findGroupLink = function(index) {
+ return groups.eq(index).find('.accordion-toggle').eq(0);
};
- var findGroupBody = function (index) {
+ var findGroupBody = function(index) {
return groups.eq(index).find('.panel-collapse').eq(0);
};
-
beforeEach(inject(function(_$rootScope_, _$compile_) {
scope = _$rootScope_;
$compile = _$compile_;
}));
- afterEach(function () {
- element = groups = scope = $compile = undefined;
- });
+ it('should allow custom templates', inject(function($templateCache) {
+ $templateCache.put('foo/bar.html', 'baz
');
- describe('with static panels', function () {
- beforeEach(function () {
+ var tpl =
+ 'baz
');
+ }));
+
+ describe('with static panels', function() {
+ beforeEach(function() {
+ spyOn(Math, 'random').and.returnValue(0.1);
var tpl =
- 'Content 1
' +
+ 'Content 2
' +
+ 'Content 1
' +
+ 'Content 2
' +
+ '{{group.content}}
' +
+ 'Content 1
' +
+ 'Content 2
' +
+ '{{item}}
{{item}}
Static content
' +
+ '{{group.content}}
' +
+ '{{group.content}}
' +
+ 'Content 1
' +
+ '' +
+ 'Heading Element {{x}} ' +
+ 'Body' +
+ '
' +
+ '' +
+ 'Heading Element {{x}} ' +
'Body' +
- '' +
- '';
+ '
' +
+ 'Heading Element {{x}}
' +
+ '' +
+ '
' +
+ 'Heading Element {{x}}
' +
'Body' +
- '' +
- '';
+ '{{x}}
{{x}}
- {{alert.msg}}
-
+
+
+
diff --git a/src/alert/docs/readme.md b/src/alert/docs/readme.md
index 4bc6f5242c..cf0bcad1ab 100644
--- a/src/alert/docs/readme.md
+++ b/src/alert/docs/readme.md
@@ -1,7 +1,15 @@
-Alert is an AngularJS-version of bootstrap's alert.
+This directive can be used both to generate alerts from static and dynamic model data (using the `ng-repeat` directive).
-This directive can be used to generate alerts from the dynamic model data (using the `ng-repeat` directive);
+### uib-alert settings
-The presence of the `close` attribute determines if a close button is displayed.
+* `close()`
+ $ -
+ A callback function that gets fired when an `alert` is closed. If the attribute exists, a close button is displayed as well.
-The optional `dismiss-on-timeout` attribute takes the number of milliseconds that specify timeout duration, after which the alert will be closed.
+* `dismiss-on-timeout`
+ _(Default: `none`)_ -
+ Takes the number of milliseconds that specify the timeout duration, after which the alert will be closed. This attribute requires the presence of the `close` attribute.
+
+* `template-url`
+ _(Default: `uib/template/alert/alert.html`)_ -
+ Add the ability to override the template used in the component.
diff --git a/src/alert/index.js b/src/alert/index.js
new file mode 100644
index 0000000000..f5a50975d1
--- /dev/null
+++ b/src/alert/index.js
@@ -0,0 +1,8 @@
+require('../../template/alert/alert.html.js');
+require('./alert');
+
+var MODULE_NAME = 'ui.bootstrap.module.alert';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.alert', 'uib/template/alert/alert.html']);
+
+module.exports = MODULE_NAME;
diff --git a/src/alert/test/alert.spec.js b/src/alert/test/alert.spec.js
index 271833309a..bc87c7f7ad 100644
--- a/src/alert/test/alert.spec.js
+++ b/src/alert/test/alert.spec.js
@@ -1,21 +1,22 @@
-describe('alert', function () {
- var scope, $compile;
- var element;
+describe('uib-alert', function() {
+ var element, scope, $compile, $templateCache, $timeout;
beforeEach(module('ui.bootstrap.alert'));
- beforeEach(module('template/alert/alert.html'));
-
- beforeEach(inject(function ($rootScope, _$compile_) {
+ beforeEach(module('uib/template/alert/alert.html'));
+ beforeEach(inject(function($rootScope, _$compile_, _$templateCache_, _$timeout_) {
scope = $rootScope;
$compile = _$compile_;
+ $templateCache = _$templateCache_;
+ $timeout = _$timeout_;
element = angular.element(
- '{{alert.msg}}
+ A happy alert!
+
' +
- '{{alert.msg}}' +
- ' ' +
- '
');
+ '' +
+ '
');
scope.alerts = [
{ msg:'foo', type:'success'},
@@ -35,29 +36,36 @@ describe('alert', function () {
}
function findContent(index) {
- return element.find('div[ng-transclude] span').eq(index);
+ return element.find('div[ng-transclude]').eq(index);
}
- it('should generate alerts using ng-repeat', function () {
- var alerts = createAlerts();
- expect(alerts.length).toEqual(3);
- });
+ it('should expose the controller to the view', function() {
+ $templateCache.put('uib/template/alert/alert.html', '{{alert.msg}}' +
+ '
' +
+ '{{alert.text}}
');
- it('should use correct classes for different alert types', function () {
- var alerts = createAlerts();
- expect(alerts.eq(0)).toHaveClass('alert-success');
- expect(alerts.eq(1)).toHaveClass('alert-error');
- expect(alerts.eq(2)).toHaveClass('alert-warning');
+ element = $compile('')(scope);
+ scope.$digest();
+
+ var ctrl = element.controller('uib-alert');
+ expect(ctrl).toBeDefined();
+
+ ctrl.text = 'foo';
+ scope.$digest();
+
+ expect(element.html()).toBe('foo
');
});
- it('should respect alert type binding', function () {
- var alerts = createAlerts();
- expect(alerts.eq(0)).toHaveClass('alert-success');
+ it('should support custom templates', function() {
+ $templateCache.put('foo/bar.html', 'baz
');
- scope.alerts[0].type = 'error';
+ element = $compile('')(scope);
scope.$digest();
- expect(alerts.eq(0)).toHaveClass('alert-error');
+ expect(element.html()).toBe('baz
');
+ });
+
+ it('should generate alerts using ng-repeat', function() {
+ var alerts = createAlerts();
+ expect(alerts.length).toEqual(3);
});
it('should show the alert content', function() {
@@ -68,7 +76,7 @@ describe('alert', function () {
}
});
- it('should show close buttons and have the dismissible class', function () {
+ it('should show close buttons and have the dismissible class', function() {
var alerts = createAlerts();
for (var i = 0, n = alerts.length; i < n; i++) {
@@ -77,11 +85,10 @@ describe('alert', function () {
}
});
- it('should fire callback when closed', function () {
-
+ it('should fire callback when closed', function() {
var alerts = createAlerts();
- scope.$apply(function () {
+ scope.$apply(function() {
scope.removeAlert = jasmine.createSpy();
});
@@ -91,18 +98,32 @@ describe('alert', function () {
expect(scope.removeAlert).toHaveBeenCalledWith(1);
});
- it('should not show close button and have the dismissible class if no close callback specified', function () {
- element = $compile('No close
')(scope);
scope.$digest();
expect(findCloseButton(0)).toBeHidden();
expect(element).not.toHaveClass('alert-dismissible');
});
- it('should be possible to add additional classes for alert', function () {
- var element = $compile('Default alert!
')(scope);
scope.$digest();
- expect(element).toHaveClass('alert-block');
- expect(element).toHaveClass('alert-info');
+
+ $timeout.flush();
+ expect(scope.removeAlert).toHaveBeenCalled();
});
+ it('should not close immediately with a dynamic dismiss-on-timeout', function() {
+ scope.removeAlert = jasmine.createSpy();
+ scope.dismissTime = 500;
+ $compile('Default alert!
')(scope);
+ scope.$digest();
+
+ $timeout.flush(100);
+ expect(scope.removeAlert).not.toHaveBeenCalled();
+
+ $timeout.flush(500);
+ expect(scope.removeAlert).toHaveBeenCalled();
+ });
});
diff --git a/src/alert/test/dismissOnTimeout.spec.js b/src/alert/test/dismissOnTimeout.spec.js
deleted file mode 100644
index da46e8a9d5..0000000000
--- a/src/alert/test/dismissOnTimeout.spec.js
+++ /dev/null
@@ -1,21 +0,0 @@
-describe('dismissOnTimeout', function () {
-
- var scope, $compile, $timeout;
-
- beforeEach(module('ui.bootstrap.alert'));
- beforeEach(module('template/alert/alert.html'));
- beforeEach(inject(function ($rootScope, _$compile_, _$timeout_) {
- scope = $rootScope;
- $compile = _$compile_;
- $timeout = _$timeout_;
- }));
-
- it('should close automatically if auto-dismiss is defined on the element', function () {
- scope.removeAlert = jasmine.createSpy();
- $compile('Single toggle
{{singleModel}}
-
+
+
+
diff --git a/src/buttons/docs/demo.js b/src/buttons/docs/demo.js
index 3cda78a7a8..3d5760fbec 100644
--- a/src/buttons/docs/demo.js
+++ b/src/buttons/docs/demo.js
@@ -8,4 +8,15 @@ angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', function ($scope)
middle: true,
right: false
};
+
+ $scope.checkResults = [];
+
+ $scope.$watchCollection('checkModel', function () {
+ $scope.checkResults = [];
+ angular.forEach($scope.checkModel, function (value, key) {
+ if (value) {
+ $scope.checkResults.push(key);
+ }
+ });
+ });
});
\ No newline at end of file
diff --git a/src/buttons/docs/readme.md b/src/buttons/docs/readme.md
index 82e736b107..e5ff9629bb 100644
--- a/src/buttons/docs/readme.md
+++ b/src/buttons/docs/readme.md
@@ -1 +1,50 @@
-There are two directives that can make a group of buttons behave like a set of checkboxes, radio buttons, or a hybrid where radio buttons can be unchecked.
+With the buttons directive, we can make a group of buttons behave like a set of checkboxes (`uib-btn-checkbox`) or behave like a set of radio buttons (`uib-btn-radio`).
+
+### uib-btn-checkbox settings
+
+* `btn-checkbox-false`
+ _(Default: `false`)_ -
+ Sets the value for the unchecked status.
+
+* `btn-checkbox-true`
+ _(Default: `true`)_ -
+ Sets the value for the checked status.
+
+* `ng-model`
+ $
+ -
+ Model where we set the checkbox status. By default `true` or `false`.
+
+### uib-btn-radio settings
+
+* `ng-model`
+ $
+ -
+ Model where we set the radio status. All radio buttons in a group should use the same `ng-model`.
+
+* `uib-btn-radio` -
+ $
+ Value to assign to the `ng-model` if we check this radio button.
+
+* `uib-uncheckable`
+ $
+ _(Default: `null`)_ -
+ An expression that evaluates to a truthy or falsy value that determines whether the `uncheckable` attribute is present.
+
+* `uncheckable`
+ B -
+ Whether a radio button can be unchecked or not.
+
+### Additional settings `uibButtonConfig`
+
+* `activeClass`
+ _(Default: `active`)_ -
+ Class to apply to the checked buttons.
+
+* `toggleEvent`
+ _(Default: `click`)_ -
+ Event used to toggle the buttons.
+
+### Known issues
+
+To use tooltips or popovers on elements within a `btn-group`, set the tooltip/popover `appendToBody` option to `true`. This is due to Bootstrap CSS styling. See [here](http://getbootstrap.com/components/#btn-groups) for more information.
diff --git a/src/buttons/index.js b/src/buttons/index.js
new file mode 100644
index 0000000000..181f258adc
--- /dev/null
+++ b/src/buttons/index.js
@@ -0,0 +1,7 @@
+require('./buttons');
+
+var MODULE_NAME = 'ui.bootstrap.module.buttons';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.buttons']);
+
+module.exports = MODULE_NAME;
diff --git a/src/buttons/test/buttons.spec.js b/src/buttons/test/buttons.spec.js
index f1ef6602f3..de2945f45a 100644
--- a/src/buttons/test/buttons.spec.js
+++ b/src/buttons/test/buttons.spec.js
@@ -1,25 +1,35 @@
-describe('buttons', function () {
+describe('buttons', function() {
var $scope, $compile;
beforeEach(module('ui.bootstrap.buttons'));
- beforeEach(inject(function (_$rootScope_, _$compile_) {
+ beforeEach(inject(function(_$rootScope_, _$compile_) {
$scope = _$rootScope_;
$compile = _$compile_;
}));
- describe('checkbox', function () {
-
- var compileButton = function (markup, scope) {
+ describe('checkbox', function() {
+ var compileButton = function(markup, scope) {
var el = $compile(markup)(scope);
scope.$digest();
return el;
};
+ it('should expose the controller to the view', inject(function($templateCache) {
+ var btn = compileButton('', $scope);
+ var ctrl = btn.controller('uibBtnCheckbox');
+ expect(ctrl).toBeDefined();
+
+ ctrl.text = 'foo';
+ $scope.$digest();
+
+ expect(btn.html()).toBe('foo');
+ }));
+
//model -> UI
- it('should work correctly with default model values', function () {
+ it('should work correctly with default model values', function() {
$scope.model = false;
- var btn = compileButton('', $scope);
+ var btn = compileButton('', $scope);
expect(btn).not.toHaveClass('active');
$scope.model = true;
@@ -27,9 +37,9 @@ describe('buttons', function () {
expect(btn).toHaveClass('active');
});
- it('should bind custom model values', function () {
+ it('should bind custom model values', function() {
$scope.model = 1;
- var btn = compileButton('', $scope);
+ var btn = compileButton('', $scope);
expect(btn).toHaveClass('active');
$scope.model = 0;
@@ -38,9 +48,9 @@ describe('buttons', function () {
});
//UI-> model
- it('should toggle default model values on click', function () {
+ it('should toggle default model values on click', function() {
$scope.model = false;
- var btn = compileButton('', $scope);
+ var btn = compileButton('', $scope);
btn.click();
expect($scope.model).toEqual(true);
@@ -51,9 +61,9 @@ describe('buttons', function () {
expect(btn).not.toHaveClass('active');
});
- it('should toggle custom model values on click', function () {
+ it('should toggle custom model values on click', function() {
$scope.model = 0;
- var btn = compileButton('', $scope);
+ var btn = compileButton('', $scope);
btn.click();
expect($scope.model).toEqual(1);
@@ -64,11 +74,11 @@ describe('buttons', function () {
expect(btn).not.toHaveClass('active');
});
- it('should monitor true / false value changes - issue 666', function () {
+ it('should monitor true / false value changes - issue 666', function() {
$scope.model = 1;
$scope.trueVal = 1;
- var btn = compileButton('', $scope);
+ var btn = compileButton('', $scope);
expect(btn).toHaveClass('active');
expect($scope.model).toEqual(1);
@@ -81,46 +91,97 @@ describe('buttons', function () {
expect($scope.model).toEqual(2);
});
- describe('setting buttonConfig', function () {
- var originalActiveClass, originalToggleEvent;
+ it('should not toggle when disabled - issue 4013', function() {
+ $scope.model = 1;
+ $scope.falseVal = 0;
+ var btn = compileButton('', $scope);
+
+ expect(btn).not.toHaveClass('active');
+ expect($scope.model).toEqual(1);
+
+ btn.click();
+
+ expect(btn).not.toHaveClass('active');
+
+ $scope.$digest();
+
+ expect(btn).not.toHaveClass('active');
+ });
+
+ describe('setting buttonConfig', function() {
+ var uibButtonConfig, originalActiveClass, originalToggleEvent;
- beforeEach(inject(function(buttonConfig) {
- originalActiveClass = buttonConfig.activeClass;
- originalToggleEvent = buttonConfig.toggleEvent;
- buttonConfig.activeClass = false;
- buttonConfig.toggleEvent = false;
+ beforeEach(inject(function(_uibButtonConfig_) {
+ uibButtonConfig = _uibButtonConfig_;
+ originalActiveClass = uibButtonConfig.activeClass;
+ originalToggleEvent = uibButtonConfig.toggleEvent;
+ uibButtonConfig.activeClass = false;
+ uibButtonConfig.toggleEvent = false;
}));
- afterEach(inject(function(buttonConfig) {
+ afterEach(function() {
// return it to the original value
- buttonConfig.activeClass = originalActiveClass;
- buttonConfig.toggleEvent = originalToggleEvent;
- }));
+ uibButtonConfig.activeClass = originalActiveClass;
+ uibButtonConfig.toggleEvent = originalToggleEvent;
+ });
- it('should use default config when buttonConfig.activeClass and buttonConfig.toggleEvent is false', function () {
+ it('should use default config when buttonConfig.activeClass and buttonConfig.toggleEvent is false', function() {
$scope.model = false;
- var btn = compileButton('', $scope);
+ var btn = compileButton('', $scope);
expect(btn).not.toHaveClass('active');
$scope.model = true;
$scope.$digest();
expect(btn).toHaveClass('active');
});
+
+ it('should be able to use a different active class', function() {
+ uibButtonConfig.activeClass = 'foo';
+ $scope.model = false;
+ var btn = compileButton('', $scope);
+ expect(btn).not.toHaveClass('foo');
+
+ $scope.model = true;
+ $scope.$digest();
+ expect(btn).toHaveClass('foo');
+ });
+
+ it('should be able to use a different toggle event', function() {
+ uibButtonConfig.toggleEvent = 'mouseenter';
+ $scope.model = false;
+ var btn = compileButton('', $scope);
+ expect(btn).not.toHaveClass('active');
+
+ btn.trigger('mouseenter');
+
+ $scope.$digest();
+ expect(btn).toHaveClass('active');
+ });
});
});
- describe('radio', function () {
-
- var compileButtons = function (markup, scope) {
+ describe('radio', function() {
+ var compileButtons = function(markup, scope) {
var el = $compile(''+markup+'
')(scope);
scope.$digest();
return el.find('button');
};
+ it('should expose the controller to the view', inject(function($templateCache) {
+ var btn = compileButtons('', $scope);
+ var ctrl = btn.controller('uibBtnRadio');
+ expect(ctrl).toBeDefined();
+
+ ctrl.text = 'foo';
+ $scope.$digest();
+
+ expect(btn.html()).toBe('foo');
+ }));
+
//model -> UI
- it('should work correctly set active class based on model', function () {
- var btns = compileButtons('', $scope);
+ it('should set active class based on model', function() {
+ var btns = compileButtons('', $scope);
expect(btns.eq(0)).not.toHaveClass('active');
expect(btns.eq(1)).not.toHaveClass('active');
@@ -131,8 +192,8 @@ describe('buttons', function () {
});
//UI->model
- it('should work correctly set active class based on model', function () {
- var btns = compileButtons('', $scope);
+ it('should set active class via click', function() {
+ var btns = compileButtons('', $scope);
expect($scope.model).toBeUndefined();
btns.eq(0).click();
@@ -146,10 +207,10 @@ describe('buttons', function () {
expect(btns.eq(0)).not.toHaveClass('active');
});
- it('should watch btn-radio values and update state accordingly', function () {
+ it('should watch uib-btn-radio values and update state accordingly', function() {
$scope.values = ['value1', 'value2'];
- var btns = compileButtons('', $scope);
+ var btns = compileButtons('', $scope);
expect(btns.eq(0)).not.toHaveClass('active');
expect(btns.eq(1)).not.toHaveClass('active');
@@ -165,22 +226,59 @@ describe('buttons', function () {
expect(btns.eq(1)).toHaveClass('active');
});
- it('should do nothing when click active radio', function () {
+ it('should do nothing when clicking an active radio', function() {
+ $scope.model = 1;
+ var btns = compileButtons('', $scope);
+ expect(btns.eq(0)).toHaveClass('active');
+ expect(btns.eq(1)).not.toHaveClass('active');
+
+ btns.eq(0).click();
+ $scope.$digest();
+ expect(btns.eq(0)).toHaveClass('active');
+ expect(btns.eq(1)).not.toHaveClass('active');
+ });
+
+ it('should not toggle when disabled - issue 4013', function() {
$scope.model = 1;
- var btns = compileButtons('', $scope);
+ var btns = compileButtons('', $scope);
+
+ expect(btns.eq(0)).toHaveClass('active');
+ expect(btns.eq(1)).not.toHaveClass('active');
+
+ btns.eq(1).click();
+
+ expect(btns.eq(0)).toHaveClass('active');
+ expect(btns.eq(1)).not.toHaveClass('active');
+
+ $scope.$digest();
+
expect(btns.eq(0)).toHaveClass('active');
expect(btns.eq(1)).not.toHaveClass('active');
+ });
+
+ it('should handle string values in uib-btn-radio value', function() {
+ $scope.model = 'Two';
+ var btns = compileButtons('', $scope);
+
+ expect(btns.eq(0)).not.toHaveClass('active');
+ expect(btns.eq(1)).toHaveClass('active');
btns.eq(0).click();
+ expect(btns.eq(0)).toHaveClass('active');
+ expect(btns.eq(1)).not.toHaveClass('active');
+ expect($scope.model).toEqual('One');
+
$scope.$digest();
+
expect(btns.eq(0)).toHaveClass('active');
expect(btns.eq(1)).not.toHaveClass('active');
+ expect($scope.model).toEqual('One');
});
- describe('uncheckable', function () {
+ describe('uncheckable', function() {
//model -> UI
- it('should set active class based on model', function () {
- var btns = compileButtons('', $scope);
+ it('should set active class based on model', function() {
+ var btns = compileButtons('', $scope);
expect(btns.eq(0)).not.toHaveClass('active');
expect(btns.eq(1)).not.toHaveClass('active');
@@ -191,8 +289,8 @@ describe('buttons', function () {
});
//UI->model
- it('should unset active class based on model', function () {
- var btns = compileButtons('', $scope);
+ it('should unset active class via click', function() {
+ var btns = compileButtons('', $scope);
expect($scope.model).toBeUndefined();
btns.eq(0).click();
@@ -206,10 +304,10 @@ describe('buttons', function () {
expect(btns.eq(0)).not.toHaveClass('active');
});
- it('should watch btn-radio values and update state', function () {
+ it('should watch uib-btn-radio values and update state', function() {
$scope.values = ['value1', 'value2'];
- var btns = compileButtons('', $scope);
+ var btns = compileButtons('', $scope);
expect(btns.eq(0)).not.toHaveClass('active');
expect(btns.eq(1)).not.toHaveClass('active');
@@ -224,5 +322,45 @@ describe('buttons', function () {
expect(btns.eq(1)).not.toHaveClass('active');
});
});
+
+ describe('uibUncheckable', function() {
+ it('should set uncheckable', function() {
+ $scope.uncheckable = false;
+ var btns = compileButtons('', $scope);
+ expect(btns.eq(0).attr('uncheckable')).toBeUndefined();
+ expect(btns.eq(1).attr('uncheckable')).toBeUndefined();
+
+ expect($scope.model).toBeUndefined();
+
+ btns.eq(0).click();
+ expect($scope.model).toEqual(1);
+
+ btns.eq(0).click();
+ expect($scope.model).toEqual(1);
+
+ btns.eq(1).click();
+ expect($scope.model).toEqual(2);
+
+ btns.eq(1).click();
+ expect($scope.model).toEqual(2);
+
+ $scope.uncheckable = true;
+ $scope.$digest();
+ expect(btns.eq(0).attr('uncheckable')).toBeUndefined();
+ expect(btns.eq(1).attr('uncheckable')).toBeDefined();
+
+ btns.eq(0).click();
+ expect($scope.model).toEqual(1);
+
+ btns.eq(0).click();
+ expect($scope.model).toEqual(1);
+
+ btns.eq(1).click();
+ expect($scope.model).toEqual(2);
+
+ btns.eq(1).click();
+ expect($scope.model).toBeNull();
+ });
+ });
});
});
diff --git a/src/carousel/carousel.js b/src/carousel/carousel.js
index ce50c9429a..aaa04f8a95 100644
--- a/src/carousel/carousel.js
+++ b/src/carousel/carousel.js
@@ -1,106 +1,229 @@
-/**
-* @ngdoc overview
-* @name ui.bootstrap.carousel
-*
-* @description
-* AngularJS version of an image carousel.
-*
-*/
angular.module('ui.bootstrap.carousel', [])
-.controller('CarouselController', ['$scope', '$interval', '$animate', function ($scope, $interval, $animate) {
+
+.controller('UibCarouselController', ['$scope', '$element', '$interval', '$timeout', '$animate', function($scope, $element, $interval, $timeout, $animate) {
var self = this,
slides = self.slides = $scope.slides = [],
- currentIndex = -1,
+ SLIDE_DIRECTION = 'uib-slideDirection',
+ currentIndex = $scope.active,
currentInterval, isPlaying;
- self.currentSlide = null;
var destroyed = false;
+ $element.addClass('carousel');
+
+ self.addSlide = function(slide, element) {
+ slides.push({
+ slide: slide,
+ element: element
+ });
+ slides.sort(function(a, b) {
+ return +a.slide.index - +b.slide.index;
+ });
+ //if this is the first slide or the slide is set to active, select it
+ if (slide.index === $scope.active || slides.length === 1 && !angular.isNumber($scope.active)) {
+ if ($scope.$currentTransition) {
+ $scope.$currentTransition = null;
+ }
+
+ currentIndex = slide.index;
+ $scope.active = slide.index;
+ setActive(currentIndex);
+ self.select(slides[findSlideIndex(slide)]);
+ if (slides.length === 1) {
+ $scope.play();
+ }
+ }
+ };
+
+ self.getCurrentIndex = function() {
+ for (var i = 0; i < slides.length; i++) {
+ if (slides[i].slide.index === currentIndex) {
+ return i;
+ }
+ }
+ };
+
+ self.next = $scope.next = function() {
+ var newIndex = (self.getCurrentIndex() + 1) % slides.length;
+
+ if (newIndex === 0 && $scope.noWrap()) {
+ $scope.pause();
+ return;
+ }
+
+ return self.select(slides[newIndex], 'next');
+ };
+
+ self.prev = $scope.prev = function() {
+ var newIndex = self.getCurrentIndex() - 1 < 0 ? slides.length - 1 : self.getCurrentIndex() - 1;
+
+ if ($scope.noWrap() && newIndex === slides.length - 1) {
+ $scope.pause();
+ return;
+ }
+
+ return self.select(slides[newIndex], 'prev');
+ };
+
+ self.removeSlide = function(slide) {
+ var index = findSlideIndex(slide);
+
+ //get the index of the slide inside the carousel
+ slides.splice(index, 1);
+ if (slides.length > 0 && currentIndex === index) {
+ if (index >= slides.length) {
+ currentIndex = slides.length - 1;
+ $scope.active = currentIndex;
+ setActive(currentIndex);
+ self.select(slides[slides.length - 1]);
+ } else {
+ currentIndex = index;
+ $scope.active = currentIndex;
+ setActive(currentIndex);
+ self.select(slides[index]);
+ }
+ } else if (currentIndex > index) {
+ currentIndex--;
+ $scope.active = currentIndex;
+ }
+
+ //clean the active value when no more slide
+ if (slides.length === 0) {
+ currentIndex = null;
+ $scope.active = null;
+ }
+ };
+
/* direction: "prev" or "next" */
self.select = $scope.select = function(nextSlide, direction) {
- var nextIndex = self.indexOfSlide(nextSlide);
+ var nextIndex = findSlideIndex(nextSlide.slide);
//Decide direction if it's not given
if (direction === undefined) {
direction = nextIndex > self.getCurrentIndex() ? 'next' : 'prev';
}
//Prevent this user-triggered transition from occurring if there is already one in progress
- if (nextSlide && nextSlide !== self.currentSlide && !$scope.$currentTransition) {
- goNext(nextSlide, nextIndex, direction);
+ if (nextSlide.slide.index !== currentIndex &&
+ !$scope.$currentTransition) {
+ goNext(nextSlide.slide, nextIndex, direction);
}
};
- function goNext(slide, index, direction) {
- // Scope has been destroyed, stop here.
- if (destroyed) { return; }
+ /* Allow outside people to call indexOf on slides array */
+ $scope.indexOfSlide = function(slide) {
+ return +slide.slide.index;
+ };
- angular.extend(slide, {direction: direction, active: true});
- angular.extend(self.currentSlide || {}, {direction: direction, active: false});
- if ($animate.enabled() && !$scope.noTransition && !$scope.$currentTransition &&
- slide.$element) {
- $scope.$currentTransition = true;
- slide.$element.one('$animate:close', function closeFn() {
- $scope.$currentTransition = null;
- });
+ $scope.isActive = function(slide) {
+ return $scope.active === slide.slide.index;
+ };
+
+ $scope.isPrevDisabled = function() {
+ return $scope.active === 0 && $scope.noWrap();
+ };
+
+ $scope.isNextDisabled = function() {
+ return $scope.active === slides.length - 1 && $scope.noWrap();
+ };
+
+ $scope.pause = function() {
+ if (!$scope.noPause) {
+ isPlaying = false;
+ resetTimer();
}
+ };
- self.currentSlide = slide;
- currentIndex = index;
+ $scope.play = function() {
+ if (!isPlaying) {
+ isPlaying = true;
+ restartTimer();
+ }
+ };
- //every time you change slides, reset the timer
- restartTimer();
- }
+ $element.on('mouseenter', $scope.pause);
+ $element.on('mouseleave', $scope.play);
- $scope.$on('$destroy', function () {
+ $scope.$on('$destroy', function() {
destroyed = true;
+ resetTimer();
});
- function getSlideByIndex(index) {
- if (angular.isUndefined(slides[index].index)) {
- return slides[index];
+ $scope.$watch('noTransition', function(noTransition) {
+ $animate.enabled($element, !noTransition);
+ });
+
+ $scope.$watch('interval', restartTimer);
+
+ $scope.$watchCollection('slides', resetTransition);
+
+ $scope.$watch('active', function(index) {
+ if (angular.isNumber(index) && currentIndex !== index) {
+ for (var i = 0; i < slides.length; i++) {
+ if (slides[i].slide.index === index) {
+ index = i;
+ break;
+ }
+ }
+
+ var slide = slides[index];
+ if (slide) {
+ setActive(index);
+ self.select(slides[index]);
+ currentIndex = index;
+ }
}
- var i, len = slides.length;
- for (i = 0; i < slides.length; ++i) {
- if (slides[i].index == index) {
+ });
+
+ function getSlideByIndex(index) {
+ for (var i = 0, l = slides.length; i < l; ++i) {
+ if (slides[i].index === index) {
return slides[i];
}
}
}
- self.getCurrentIndex = function() {
- if (self.currentSlide && angular.isDefined(self.currentSlide.index)) {
- return +self.currentSlide.index;
+ function setActive(index) {
+ for (var i = 0; i < slides.length; i++) {
+ slides[i].slide.active = i === index;
}
- return currentIndex;
- };
-
- /* Allow outside people to call indexOf on slides array */
- self.indexOfSlide = function(slide) {
- return angular.isDefined(slide.index) ? +slide.index : slides.indexOf(slide);
- };
+ }
- $scope.next = function() {
- var newIndex = (self.getCurrentIndex() + 1) % slides.length;
+ function goNext(slide, index, direction) {
+ if (destroyed) {
+ return;
+ }
- return self.select(getSlideByIndex(newIndex), 'next');
- };
+ angular.extend(slide, {direction: direction});
+ angular.extend(slides[currentIndex].slide || {}, {direction: direction});
+ if ($animate.enabled($element) && !$scope.$currentTransition &&
+ slides[index].element && self.slides.length > 1) {
+ slides[index].element.data(SLIDE_DIRECTION, slide.direction);
+ var currentIdx = self.getCurrentIndex();
- $scope.prev = function() {
- var newIndex = self.getCurrentIndex() - 1 < 0 ? slides.length - 1 : self.getCurrentIndex() - 1;
+ if (angular.isNumber(currentIdx) && slides[currentIdx].element) {
+ slides[currentIdx].element.data(SLIDE_DIRECTION, slide.direction);
+ }
- return self.select(getSlideByIndex(newIndex), 'prev');
- };
+ $scope.$currentTransition = true;
+ $animate.on('addClass', slides[index].element, function(element, phase) {
+ if (phase === 'close') {
+ $scope.$currentTransition = null;
+ $animate.off('addClass', element);
+ }
+ });
+ }
- $scope.isActive = function(slide) {
- return self.currentSlide === slide;
- };
+ $scope.active = slide.index;
+ currentIndex = slide.index;
+ setActive(index);
- $scope.$watch('interval', restartTimer);
- $scope.$on('$destroy', resetTimer);
+ //every time you change slides, reset the timer
+ restartTimer();
+ }
- function restartTimer() {
- resetTimer();
- var interval = +$scope.interval;
- if (!isNaN(interval) && interval > 0) {
- currentInterval = $interval(timerFn, interval);
+ function findSlideIndex(slide) {
+ for (var i = 0; i < slides.length; i++) {
+ if (slides[i].slide === slide) {
+ return i;
+ }
}
}
@@ -111,172 +234,63 @@ angular.module('ui.bootstrap.carousel', [])
}
}
- function timerFn() {
- var interval = +$scope.interval;
- if (isPlaying && !isNaN(interval) && interval > 0) {
- $scope.next();
- } else {
- $scope.pause();
+ function resetTransition(slides) {
+ if (!slides.length) {
+ $scope.$currentTransition = null;
}
}
- $scope.play = function() {
- if (!isPlaying) {
- isPlaying = true;
- restartTimer();
- }
- };
- $scope.pause = function() {
- if (!$scope.noPause) {
- isPlaying = false;
- resetTimer();
+ function restartTimer() {
+ resetTimer();
+ var interval = +$scope.interval;
+ if (!isNaN(interval) && interval > 0) {
+ currentInterval = $interval(timerFn, interval);
}
- };
+ }
- self.addSlide = function(slide, element) {
- slide.$element = element;
- slides.push(slide);
- //if this is the first slide or the slide is set to active, select it
- if(slides.length === 1 || slide.active) {
- self.select(slides[slides.length-1]);
- if (slides.length == 1) {
- $scope.play();
- }
+ function timerFn() {
+ var interval = +$scope.interval;
+ if (isPlaying && !isNaN(interval) && interval > 0 && slides.length) {
+ $scope.next();
} else {
- slide.active = false;
- }
- };
-
- self.removeSlide = function(slide) {
- if (angular.isDefined(slide.index)) {
- slides.sort(function(a, b) {
- return +a.index > +b.index;
- });
- }
- //get the index of the slide inside the carousel
- var index = slides.indexOf(slide);
- slides.splice(index, 1);
- if (slides.length > 0 && slide.active) {
- if (index >= slides.length) {
- self.select(slides[index-1]);
- } else {
- self.select(slides[index]);
- }
- } else if (currentIndex > index) {
- currentIndex--;
+ $scope.pause();
}
- };
-
+ }
}])
-/**
- * @ngdoc directive
- * @name ui.bootstrap.carousel.directive:carousel
- * @restrict EA
- *
- * @description
- * Carousel is the outer container for a set of image 'slides' to showcase.
- *
- * @param {number=} interval The time, in milliseconds, that it will take the carousel to go to the next slide.
- * @param {boolean=} noTransition Whether to disable transitions on the carousel.
- * @param {boolean=} noPause Whether to disable pausing on the carousel (by default, the carousel interval pauses on hover).
- *
- * @example
-
-
- Beautiful!
-
-
- D'aww!
-
-
-
- ![]()
-
-
- Interval, in milliseconds:
-
Enter a negative number to stop the interval. -
-
-
- Slide {{$index}}
-{{slide.text}}
-Enter a negative number to stop the interval. -
-
-
+
+
![]()
+
-
-
-
+ Slide {{$index}}
+Slide {{slide.id}}
{{slide.text}}
+
+
+
+
Interval, in milliseconds:
diff --git a/src/carousel/docs/demo.js b/src/carousel/docs/demo.js
index cfdf35b5a0..79dd322dc6 100644
--- a/src/carousel/docs/demo.js
+++ b/src/carousel/docs/demo.js
@@ -1,15 +1,57 @@
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 5000;
+ $scope.noWrapSlides = false;
+ $scope.active = 0;
var slides = $scope.slides = [];
+ var currIndex = 0;
+
$scope.addSlide = function() {
var newWidth = 600 + slides.length + 1;
slides.push({
- image: '//placekitten.com/' + newWidth + '/300',
- text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
- ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
+ image: '//unsplash.it/' + newWidth + '/300',
+ text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
+ id: currIndex++
});
};
- for (var i=0; i<4; i++) {
+
+ $scope.randomize = function() {
+ var indexes = generateIndexesArray();
+ assignNewIndexesToSlides(indexes);
+ };
+
+ for (var i = 0; i < 4; i++) {
$scope.addSlide();
}
+
+ // Randomize logic below
+
+ function assignNewIndexesToSlides(indexes) {
+ for (var i = 0, l = slides.length; i < l; i++) {
+ slides[i].id = indexes.pop();
+ }
+ }
+
+ function generateIndexesArray() {
+ var indexes = [];
+ for (var i = 0; i < currIndex; ++i) {
+ indexes[i] = i;
+ }
+ return shuffle(indexes);
+ }
+
+ // http://stackoverflow.com/questions/962802#962890
+ function shuffle(array) {
+ var tmp, current, top = array.length;
+
+ if (top) {
+ while (--top) {
+ current = Math.floor(Math.random() * (top + 1));
+ tmp = array[current];
+ array[current] = array[top];
+ array[top] = tmp;
+ }
+ }
+
+ return array;
+ }
});
diff --git a/src/carousel/index-nocss.js b/src/carousel/index-nocss.js
new file mode 100644
index 0000000000..4a383f07db
--- /dev/null
+++ b/src/carousel/index-nocss.js
@@ -0,0 +1,9 @@
+require('../../template/carousel/carousel.html.js');
+require('../../template/carousel/slide.html.js');
+require('./carousel');
+
+var MODULE_NAME = 'ui.bootstrap.module.carousel';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.carousel', 'uib/template/carousel/carousel.html', 'uib/template/carousel/slide.html']);
+
+module.exports = MODULE_NAME;
diff --git a/src/carousel/index.js b/src/carousel/index.js
new file mode 100644
index 0000000000..e55e95dc36
--- /dev/null
+++ b/src/carousel/index.js
@@ -0,0 +1,2 @@
+require('./carousel.css');
+module.exports = require('./index-nocss.js');
diff --git a/src/carousel/test/carousel.spec.js b/src/carousel/test/carousel.spec.js
index 86e5a0735a..87b586dbd4 100644
--- a/src/carousel/test/carousel.spec.js
+++ b/src/carousel/test/carousel.spec.js
@@ -1,25 +1,17 @@
describe('carousel', function() {
- beforeEach(module('ui.bootstrap.carousel', function($compileProvider, $provide) {
- angular.forEach(['ngSwipeLeft', 'ngSwipeRight'], makeMock);
- function makeMock(name) {
- $provide.value(name + 'Directive', []); //remove existing directive if it exists
- $compileProvider.directive(name, function() {
- return function(scope, element, attr) {
- element.on(name, function() {
- scope.$apply(attr[name]);
- });
- };
- });
- }
- }));
- beforeEach(module('template/carousel/carousel.html', 'template/carousel/slide.html'));
+ beforeEach(module('ui.bootstrap.carousel'));
+ beforeEach(module('ngAnimateMock'));
+ beforeEach(module('uib/template/carousel/carousel.html', 'uib/template/carousel/slide.html'));
- var $rootScope, $compile, $controller, $interval;
- beforeEach(inject(function(_$rootScope_, _$compile_, _$controller_, _$interval_) {
+ var $rootScope, $compile, $controller, $interval, $templateCache, $timeout, $animate;
+ beforeEach(inject(function(_$rootScope_, _$compile_, _$controller_, _$interval_, _$templateCache_, _$timeout_, _$animate_) {
$rootScope = _$rootScope_;
$compile = _$compile_;
$controller = _$controller_;
$interval = _$interval_;
+ $templateCache = _$templateCache_;
+ $timeout = _$timeout_;
+ $animate = _$animate_;
}));
describe('basics', function() {
@@ -27,16 +19,16 @@ describe('carousel', function() {
beforeEach(function() {
scope = $rootScope.$new();
scope.slides = [
- {active:false,content:'one'},
- {active:false,content:'two'},
- {active:false,content:'three'}
+ {content: 'one', index: 0},
+ {content: 'two', index: 1},
+ {content: 'three', index: 2}
];
elm = $compile(
- '' +
- '' +
+ 'foo
');
+
+ elm = $compile('')(scope);
+ $rootScope.$digest();
+
+ expect(elm.html()).toBe('' +
+ '
'
)(scope);
scope.interval = 5000;
scope.nopause = undefined;
@@ -44,19 +36,41 @@ describe('carousel', function() {
});
function testSlideActive(slideIndex) {
- for (var i=0; i' +
'{{slide.content}}' +
- '' +
- ''
+ '
' +
+ 'foo
');
+ });
+
+ it('should allow overriding of the slide template', function() {
+ $templateCache.put('foo/bar.html', '');
+
+ elm = $compile(
+ '' +
+ '' +
+ '
'
+ )(scope);
+ $rootScope.$digest();
+
+ var slide = elm.find('.slide');
+ expect(slide.html()).toBe('bar');
+ });
+
+ it('should be able to select a slide via model changes', function() {
testSlideActive(0);
- scope.$apply('slides[1].active=true');
+ scope.$apply('active=1');
testSlideActive(1);
});
@@ -73,16 +87,60 @@ describe('carousel', function() {
expect(indicators.length).toBe(3);
});
+ it('should stop cycling slides forward when noWrap is truthy', function () {
+ elm = $compile(
+ '' +
+ '
'
+ )(scope);
+
+ scope.noWrap = true;
+ scope.$apply();
+
+ var $scope = elm.isolateScope();
+ spyOn($scope, 'pause');
+
+ scope.active = $scope.slides.length - 1;
+ scope.$apply();
+ testSlideActive($scope.slides.length - 1);
+ $scope.next();
+ testSlideActive($scope.slides.length - 1);
+ expect($scope.pause).toHaveBeenCalled();
+ });
+
+ it('should stop cycling slides backward when noWrap is truthy', function () {
+ elm = $compile(
+ '' +
+ '{{slide.content}}' +
+ '
' +
+ '' +
+ '
'
+ )(scope);
+
+ scope.noWrap = true;
+ scope.$apply();
+
+ var $scope = elm.isolateScope();
+ spyOn($scope, 'pause');
+
+ testSlideActive(0);
+ $scope.prev();
+ testSlideActive(0);
+ expect($scope.pause).toHaveBeenCalled();
+ });
+
it('should hide navigation when only one slide', function () {
- scope.slides=[{active:false,content:'one'}];
+ scope.slides = [{active:false,content:'one'}];
scope.$apply();
elm = $compile(
- '' +
+ '{{slide.content}}' +
+ '
' +
+ '' +
+ '
'
+ )(scope);
var indicators = elm.find('ol.carousel-indicators > li');
expect(indicators.length).toBe(0);
@@ -93,6 +151,38 @@ describe('carousel', function() {
expect(navPrev.length).toBe(0);
});
+ it('should disable prev button when slide index is 0 and noWrap is truthy', function() {
+ scope.$apply();
+
+ var $scope = elm.isolateScope();
+ $scope.noWrap = function() {return true;};
+
+ $scope.isPrevDisabled();
+ scope.$apply();
+
+ var navPrev = elm.find('a.left');
+ expect(navPrev.hasClass('disabled')).toBe(true);
+ });
+
+ it('should disable next button when last slide is active and noWrap is truthy', function() {
+ scope.slides = [
+ {content: 'one', index: 0},
+ {content: 'two', index: 1}
+ ];
+
+ scope.$apply();
+
+ var $scope = elm.isolateScope();
+ $scope.noWrap = function() {return true;};
+ $scope.next();
+
+ $scope.isNextDisabled();
+ scope.$apply();
+
+ var navNext = elm.find('a.right');
+ expect(navNext.hasClass('disabled')).toBe(true);
+ });
+
it('should show navigation when there are 3 slides', function () {
var indicators = elm.find('ol.carousel-indicators > li');
expect(indicators.length).not.toBe(0);
@@ -126,27 +216,13 @@ describe('carousel', function() {
testSlideActive(0);
});
- describe('swiping', function() {
- it('should go next on swipeLeft', function() {
- testSlideActive(0);
- elm.triggerHandler('ngSwipeLeft');
- testSlideActive(1);
- });
-
- it('should go prev on swipeRight', function() {
- testSlideActive(0);
- elm.triggerHandler('ngSwipeRight');
- testSlideActive(2);
- });
- });
-
it('should select a slide when clicking on slide indicators', function () {
var indicators = elm.find('ol.carousel-indicators > li');
indicators.eq(1).click();
testSlideActive(1);
});
- it('shouldnt go forward if interval is NaN or negative', function() {
+ it('shouldnt go forward if interval is NaN or negative or has no slides', function() {
testSlideActive(0);
var previousInterval = scope.interval;
scope.$apply('interval = -1');
@@ -161,10 +237,13 @@ describe('carousel', function() {
scope.$apply('interval = 1000');
$interval.flush(1000);
testSlideActive(2);
+ scope.$apply('slides = []');
+ $interval.flush(1000);
+ testSlideActive(2);
});
it('should bind the content to slides', function() {
- var contents = elm.find('div.item');
+ var contents = elm.find('div.item [ng-transclude]');
expect(contents.length).toBe(3);
expect(contents.eq(0).text()).toBe('one');
@@ -217,22 +296,28 @@ describe('carousel', function() {
});
it('should remove slide from dom and change active slide', function() {
- scope.$apply('slides[2].active = true');
+ scope.$apply('active = 2');
testSlideActive(2);
- scope.$apply('slides.splice(0,1)');
+ scope.$apply('slides.splice(2,1)');
+ $timeout.flush(0);
expect(elm.find('div.item').length).toBe(2);
testSlideActive(1);
$interval.flush(scope.interval);
testSlideActive(0);
scope.$apply('slides.splice(1,1)');
+ $timeout.flush(0);
expect(elm.find('div.item').length).toBe(1);
testSlideActive(0);
});
it('should change dom when you reassign ng-repeat slides array', function() {
- scope.slides=[{content:'new1'},{content:'new2'},{content:'new3'}];
+ scope.slides = [
+ {content:'new1', index: 4},
+ {content:'new2', index: 5},
+ {content:'new3', index: 6}
+ ];
scope.$apply();
- var contents = elm.find('div.item');
+ var contents = elm.find('div.item [ng-transclude]');
expect(contents.length).toBe(3);
expect(contents.eq(0).text()).toBe('new1');
expect(contents.eq(1).text()).toBe('new2');
@@ -254,6 +339,39 @@ describe('carousel', function() {
testSlideActive(1);
});
+ it('should buffer the slides if transition is clicked and only transition to the last requested', function() {
+ var carouselScope = elm.children().scope();
+
+ testSlideActive(0);
+ carouselScope.$currentTransition = null;
+ carouselScope.select(carouselScope.slides[1]);
+ $animate.flush();
+
+ testSlideActive(1);
+
+ carouselScope.$currentTransition = true;
+ carouselScope.select(carouselScope.slides[2]);
+ scope.$apply();
+
+ testSlideActive(1);
+
+ carouselScope.select(carouselScope.slides[0]);
+ scope.$apply();
+
+ testSlideActive(1);
+
+ carouselScope.$currentTransition = null;
+ $interval.flush(scope.interval);
+ $animate.flush();
+
+ testSlideActive(2);
+
+ $interval.flush(scope.interval);
+ $animate.flush();
+
+ testSlideActive(0);
+ });
+
it('issue 1414 - should not continue running timers after scope is destroyed', function() {
testSlideActive(0);
$interval.flush(scope.interval);
@@ -267,147 +385,212 @@ describe('carousel', function() {
expect($interval.cancel).toHaveBeenCalled();
});
- describe('slide order', function() {
-
- beforeEach(function() {
- scope.slides = [
- {active:false,content:'one', id:1},
- {active:false,content:'two', id:2},
- {active:false,content:'three', id:3}
- ];
- elm = $compile(
- '' +
+ '{{slide.content}}' +
+ '
' +
+ '' +
+ '
'
+ )(scope);
+ scope.$apply();
+ });
- it('should remove slide after order change', function() {
- testSlideActive(0);
- scope.slides.splice(1, 1);
- scope.$apply();
- var contents = elm.find('div.item');
- expect(contents.length).toBe(2);
- expect(contents.eq(0).text()).toBe('three');
- expect(contents.eq(1).text()).toBe('one');
- });
+ function testSlideActive(slideIndex) {
+ for (var i = 0; i < scope.slides.length; i++) {
+ if (i === slideIndex) {
+ expect(scope.active).toBe(scope.slides[i].id);
+ } else {
+ expect(scope.active).not.toBe(scope.slides[i].id);
+ }
+ }
+ }
+
+ it('should change dom when the order of the slides changes', function() {
+ scope.slides[0].id = 3;
+ scope.slides[1].id = 2;
+ scope.slides[2].id = 1;
+ scope.$apply();
+ var contents = elm.find('div.item [ng-transclude]');
+ expect(contents.length).toBe(3);
+ expect(contents.eq(0).text()).toBe('three');
+ expect(contents.eq(1).text()).toBe('two');
+ expect(contents.eq(2).text()).toBe('one');
+ });
+ it('should select next after order change', function() {
+ testSlideActive(1);
+ var next = elm.find('a.right');
+ next.click();
+ testSlideActive(2);
+ });
+
+ it('should select prev after order change', function() {
+ testSlideActive(1);
+ var prev = elm.find('a.left');
+ prev.click();
+ testSlideActive(0);
});
+ it('should add slide in the specified position', function() {
+ testSlideActive(1);
+ scope.slides[2].id = 4;
+ scope.slides.push({content:'four', id: 5});
+ scope.$apply();
+ var contents = elm.find('div.item [ng-transclude]');
+ expect(contents.length).toBe(4);
+ expect(contents.eq(0).text()).toBe('two');
+ expect(contents.eq(1).text()).toBe('one');
+ expect(contents.eq(2).text()).toBe('three');
+ expect(contents.eq(3).text()).toBe('four');
+ });
+
+ it('should remove slide after order change', function() {
+ testSlideActive(1);
+ scope.slides.splice(1, 1);
+ scope.$apply();
+ var contents = elm.find('div.item [ng-transclude]');
+ expect(contents.length).toBe(2);
+ expect(contents.eq(0).text()).toBe('three');
+ expect(contents.eq(1).text()).toBe('one');
+ });
});
describe('controller', function() {
var scope, ctrl;
//create an array of slides and add to the scope
- var slides = [{'content':1},{'content':2},{'content':3},{'content':4}];
+ var slides = [
+ {'content': 1, index: 0},
+ {'content': 2, index: 1},
+ {'content': 3, index: 2},
+ {'content': 4, index: 3}
+ ];
beforeEach(function() {
scope = $rootScope.$new();
- ctrl = $controller('CarouselController', {$scope: scope, $element: null});
- for(var i = 0;i < slides.length;i++){
+ scope.noWrap = angular.noop;
+ ctrl = $controller('UibCarouselController', {$scope: scope, $element: angular.element('')});
+ for (var i = 0; i < slides.length; i++) {
ctrl.addSlide(slides[i]);
}
});
- describe('addSlide', function() {
- it('should set first slide to active = true and the rest to false', function() {
- angular.forEach(ctrl.slides, function(slide, i) {
- if (i !== 0) {
- expect(slide.active).not.toBe(true);
- } else {
- expect(slide.active).toBe(true);
- }
- });
- });
-
- it('should add new slide and change active to true if active is true on the added slide', function() {
- var newSlide = {active: true};
- expect(ctrl.slides.length).toBe(4);
- ctrl.addSlide(newSlide);
- expect(ctrl.slides.length).toBe(5);
- expect(ctrl.slides[4].active).toBe(true);
- expect(ctrl.slides[0].active).toBe(false);
+ it('should set first slide to active = true and the rest to false', function() {
+ angular.forEach(ctrl.slides, function(slide, i) {
+ if (i !== 0) {
+ expect(slide.slide.active).not.toBe(true);
+ } else {
+ expect(slide.slide.active).toBe(true);
+ }
});
+ });
- it('should add a new slide and not change the active slide', function() {
- var newSlide = {active: false};
- expect(ctrl.slides.length).toBe(4);
- ctrl.addSlide(newSlide);
- expect(ctrl.slides.length).toBe(5);
- expect(ctrl.slides[4].active).toBe(false);
- expect(ctrl.slides[0].active).toBe(true);
- });
+ it('should add a new slide and not change the active slide', function() {
+ var newSlide = {active: false, index: 4};
+ expect(ctrl.slides.length).toBe(4);
+ ctrl.addSlide(newSlide);
+ expect(ctrl.slides.length).toBe(5);
+ expect(ctrl.slides[4].slide.active).toBe(false);
+ expect(ctrl.slides[0].slide.active).toBe(true);
+ });
- it('should remove slide and change active slide if needed', function() {
- expect(ctrl.slides.length).toBe(4);
- ctrl.removeSlide(ctrl.slides[0]);
- expect(ctrl.slides.length).toBe(3);
- expect(ctrl.currentSlide).toBe(ctrl.slides[0]);
- ctrl.select(ctrl.slides[2]);
- ctrl.removeSlide(ctrl.slides[2]);
- expect(ctrl.slides.length).toBe(2);
- expect(ctrl.currentSlide).toBe(ctrl.slides[1]);
- ctrl.removeSlide(ctrl.slides[0]);
- expect(ctrl.slides.length).toBe(1);
- expect(ctrl.currentSlide).toBe(ctrl.slides[0]);
- });
+ it('should remove slide and change active slide if needed', function() {
+ expect(ctrl.slides.length).toBe(4);
+ ctrl.removeSlide(ctrl.slides[0].slide);
+ $timeout.flush(0);
+ expect(ctrl.slides.length).toBe(3);
+ expect(scope.active).toBe(1);
+ ctrl.select(ctrl.slides[2]);
+ ctrl.removeSlide(ctrl.slides[2].slide);
+ $timeout.flush(0);
+ expect(ctrl.slides.length).toBe(2);
+ expect(scope.active).toBe(2);
+ ctrl.removeSlide(ctrl.slides[0].slide);
+ $timeout.flush(0);
+ expect(ctrl.slides.length).toBe(1);
+ expect(scope.active).toBe(1);
+ });
- it('issue 1414 - should not continue running timers after scope is destroyed', function() {
- spyOn(scope, 'next').and.callThrough();
- scope.interval = 2000;
- scope.$digest();
+ it('issue 1414 - should not continue running timers after scope is destroyed', function() {
+ spyOn(scope, 'next');
+ scope.interval = 2000;
+ scope.$digest();
- $interval.flush(scope.interval);
- expect(scope.next.calls.count()).toBe(1);
+ $interval.flush(scope.interval);
+ expect(scope.next.calls.count()).toBe(1);
- scope.$destroy();
+ scope.$destroy();
- $interval.flush(scope.interval);
- expect(scope.next.calls.count()).toBe(1);
- });
+ $interval.flush(scope.interval);
+ expect(scope.next.calls.count()).toBe(1);
});
+
+ it('should be exposed in the template', inject(function($templateCache) {
+ $templateCache.put('uib/template/carousel/carousel.html', '' +
+ '{{slide.content}}' +
+ '
' +
+ '{{carousel.text}}
');
+
+ var scope = $rootScope.$new();
+ var elm = $compile('')(scope);
+ $rootScope.$digest();
+
+ var ctrl = elm.controller('uibCarousel');
+
+ expect(ctrl).toBeDefined();
+
+ ctrl.text = 'foo';
+ $rootScope.$digest();
+
+ expect(elm.html()).toBe('foo
');
+ }));
+ });
+
+ it('should expose a custom model in the carousel slide', function() {
+ var scope = $rootScope.$new();
+ scope.slides = [
+ {active:false,content:'one'},
+ {active:false,content:'two'},
+ {active:false,content:'three'}
+ ];
+ var elm = $compile(
+ '' +
+ '
'
+ )(scope);
+ $rootScope.$digest();
+
+ var ctrl = elm.controller('uibCarousel');
+
+ expect(angular.equals(ctrl.slides.map(function(slide) {
+ return slide.slide.actual;
+ }), scope.slides)).toBe(true);
});
});
diff --git a/src/collapse/collapse.js b/src/collapse/collapse.js
index 8f24d29ba7..7e605b641d 100644
--- a/src/collapse/collapse.js
+++ b/src/collapse/collapse.js
@@ -1,44 +1,127 @@
angular.module('ui.bootstrap.collapse', [])
- .directive('collapse', ['$animate', function ($animate) {
-
+ .directive('uibCollapse', ['$animate', '$q', '$parse', '$injector', function($animate, $q, $parse, $injector) {
+ var $animateCss = $injector.has('$animateCss') ? $injector.get('$animateCss') : null;
return {
- link: function (scope, element, attrs) {
+ link: function(scope, element, attrs) {
+ var expandingExpr = $parse(attrs.expanding),
+ expandedExpr = $parse(attrs.expanded),
+ collapsingExpr = $parse(attrs.collapsing),
+ collapsedExpr = $parse(attrs.collapsed),
+ horizontal = false,
+ css = {},
+ cssTo = {};
+
+ init();
+
+ function init() {
+ horizontal = !!('horizontal' in attrs);
+ if (horizontal) {
+ css = {
+ width: ''
+ };
+ cssTo = {width: '0'};
+ } else {
+ css = {
+ height: ''
+ };
+ cssTo = {height: '0'};
+ }
+ if (!scope.$eval(attrs.uibCollapse)) {
+ element.addClass('in')
+ .addClass('collapse')
+ .attr('aria-expanded', true)
+ .attr('aria-hidden', false)
+ .css(css);
+ }
+ }
+
+ function getScrollFromElement(element) {
+ if (horizontal) {
+ return {width: element.scrollWidth + 'px'};
+ }
+ return {height: element.scrollHeight + 'px'};
+ }
+
function expand() {
- element.removeClass('collapse').addClass('collapsing');
- $animate.addClass(element, 'in', {
- to: { height: element[0].scrollHeight + 'px' }
- }).then(expandDone);
+ if (element.hasClass('collapse') && element.hasClass('in')) {
+ return;
+ }
+
+ $q.resolve(expandingExpr(scope))
+ .then(function() {
+ element.removeClass('collapse')
+ .addClass('collapsing')
+ .attr('aria-expanded', true)
+ .attr('aria-hidden', false);
+
+ if ($animateCss) {
+ $animateCss(element, {
+ addClass: 'in',
+ easing: 'ease',
+ css: {
+ overflow: 'hidden'
+ },
+ to: getScrollFromElement(element[0])
+ }).start()['finally'](expandDone);
+ } else {
+ $animate.addClass(element, 'in', {
+ css: {
+ overflow: 'hidden'
+ },
+ to: getScrollFromElement(element[0])
+ }).then(expandDone);
+ }
+ }, angular.noop);
}
function expandDone() {
- element.removeClass('collapsing');
- element.css({height: 'auto'});
+ element.removeClass('collapsing')
+ .addClass('collapse')
+ .css(css);
+ expandedExpr(scope);
}
function collapse() {
- element
- // IMPORTANT: The height must be set before adding "collapsing" class.
- // Otherwise, the browser attempts to animate from height 0 (in
- // collapsing class) to the given height here.
- .css({height: element[0].scrollHeight + 'px'})
- // initially all panel collapse have the collapse class, this removal
- // prevents the animation from jumping to collapsed state
- .removeClass('collapse')
- .addClass('collapsing');
-
- $animate.removeClass(element, 'in', {
- to: {height: '0'}
- }).then(collapseDone);
+ if (!element.hasClass('collapse') && !element.hasClass('in')) {
+ return collapseDone();
+ }
+
+ $q.resolve(collapsingExpr(scope))
+ .then(function() {
+ element
+ // IMPORTANT: The width must be set before adding "collapsing" class.
+ // Otherwise, the browser attempts to animate from width 0 (in
+ // collapsing class) to the given width here.
+ .css(getScrollFromElement(element[0]))
+ // initially all panel collapse have the collapse class, this removal
+ // prevents the animation from jumping to collapsed state
+ .removeClass('collapse')
+ .addClass('collapsing')
+ .attr('aria-expanded', false)
+ .attr('aria-hidden', true);
+
+ if ($animateCss) {
+ $animateCss(element, {
+ removeClass: 'in',
+ to: cssTo
+ }).start()['finally'](collapseDone);
+ } else {
+ $animate.removeClass(element, 'in', {
+ to: cssTo
+ }).then(collapseDone);
+ }
+ }, angular.noop);
}
function collapseDone() {
- element.css({height: '0'}); // Required so that collapse works when animation is disabled
- element.removeClass('collapsing');
- element.addClass('collapse');
+ element.css(cssTo); // Required so that collapse works when animation is disabled
+ element.removeClass('collapsing')
+ .addClass('collapse');
+ collapsedExpr(scope);
}
- scope.$watch(attrs.collapse, function (shouldCollapse) {
+ scope.$watch(attrs.uibCollapse, function(shouldCollapse) {
if (shouldCollapse) {
collapse();
} else {
diff --git a/src/collapse/docs/demo.html b/src/collapse/docs/demo.html
index 131f1bf6a6..f5e06e7fbc 100644
--- a/src/collapse/docs/demo.html
+++ b/src/collapse/docs/demo.html
@@ -1,7 +1,40 @@
+
' +
+ '{{slide.content}}' +
+ '
' +
+ '
-
+
-
diff --git a/src/collapse/docs/demo.js b/src/collapse/docs/demo.js
index 897eecaf58..f685290001 100644
--- a/src/collapse/docs/demo.js
+++ b/src/collapse/docs/demo.js
@@ -1,3 +1,5 @@
angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
+ $scope.isNavCollapsed = true;
$scope.isCollapsed = false;
+ $scope.isCollapsedHorizontal = false;
});
diff --git a/src/collapse/docs/readme.md b/src/collapse/docs/readme.md
index 7699f3775a..5cdacfd3d0 100644
--- a/src/collapse/docs/readme.md
+++ b/src/collapse/docs/readme.md
@@ -1,2 +1,37 @@
-AngularJS version of Bootstrap's collapse plugin.
-Provides a simple way to hide and show an element with a css transition
+**uib-collapse** provides a simple way to hide and show an element with a css transition
+
+### uib-collapse settings
+
+* `collapsed()`
+ $ -
+ An optional expression called after the element finished collapsing.
+
+* `collapsing()`
+ $ -
+ An optional expression called before the element begins collapsing.
+ If the expression returns a promise, animation won't start until the promise resolves.
+ If the returned promise is rejected, collapsing will be cancelled.
+
+* `expanded()`
+ $ -
+ An optional expression called after the element finished expanding.
+
+* `expanding()`
+ $ -
+ An optional expression called before the element begins expanding.
+ If the expression returns a promise, animation won't start until the promise resolves.
+ If the returned promise is rejected, expanding will be cancelled.
+
+* `uib-collapse`
+ $
+
+ _(Default: `false`)_ -
+ Whether the element should be collapsed or not.
+
+* `horizontal`
+ $ -
+ An optional attribute that permit to collapse horizontally.
+
+### Known Issues
+
+When using the `horizontal` attribute with this directive, CSS can reflow as the collapse element goes from `0px` to its desired end width, which can result in height changes. This can cause animations to not appear to run. The best way around this is to set a fixed height via CSS on the horizontal collapse element so that this situation does not occur, and so the animation can run as expected.
diff --git a/src/collapse/index.js b/src/collapse/index.js
new file mode 100644
index 0000000000..b720e842c4
--- /dev/null
+++ b/src/collapse/index.js
@@ -0,0 +1,7 @@
+require('./collapse');
+
+var MODULE_NAME = 'ui.bootstrap.module.collapse';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.collapse']);
+
+module.exports = MODULE_NAME;
diff --git a/src/collapse/test/collapse.spec.js b/src/collapse/test/collapse.spec.js
index 8ed51fb6ec..f9b8c4e771 100644
--- a/src/collapse/test/collapse.spec.js
+++ b/src/collapse/test/collapse.spec.js
@@ -1,18 +1,24 @@
-describe('collapse directive', function () {
-
- var scope, $compile, $animate;
- var element;
+describe('collapse directive', function() {
+ var element, compileFn, scope, $compile, $animate, $q;
beforeEach(module('ui.bootstrap.collapse'));
beforeEach(module('ngAnimateMock'));
- beforeEach(inject(function(_$rootScope_, _$compile_, _$animate_) {
+ beforeEach(inject(function(_$rootScope_, _$compile_, _$animate_, _$q_) {
scope = _$rootScope_;
$compile = _$compile_;
$animate = _$animate_;
+ $q = _$q_;
}));
beforeEach(function() {
- element = $compile('Resize window to less than 768 pixels to display mobile menu toggle button.
+-
-
+
+
\ No newline at end of file
+Some content
+
+ +
+
+
+
+ Some content
+ +
+
-Some content
Some Content
')(scope);
+ element = angular.element(
+ ''
+ + 'Some Content
');
+ compileFn = $compile(element);
angular.element(document.body).append(element);
});
@@ -20,62 +26,146 @@ describe('collapse directive', function () {
element.remove();
});
- it('should be hidden on initialization if isCollapsed = true without transition', function() {
+ function initCallbacks() {
+ scope.collapsing = jasmine.createSpy('scope.collapsing');
+ scope.collapsed = jasmine.createSpy('scope.collapsed');
+ scope.expanding = jasmine.createSpy('scope.expanding');
+ scope.expanded = jasmine.createSpy('scope.expanded');
+ }
+
+ function assertCallbacks(expected) {
+ ['collapsing', 'collapsed', 'expanding', 'expanded'].forEach(function(cbName) {
+ if (expected[cbName]) {
+ expect(scope[cbName]).toHaveBeenCalled();
+ } else {
+ expect(scope[cbName]).not.toHaveBeenCalled();
+ }
+ });
+ }
+
+ it('should be hidden on initialization if isCollapsed = true', function() {
+ initCallbacks();
scope.isCollapsed = true;
+ compileFn(scope);
scope.$digest();
- $animate.triggerCallbacks();
- //No animation timeout here
expect(element.height()).toBe(0);
+ assertCallbacks({ collapsed: true });
+ });
+
+ it('should not trigger any animation on initialization if isCollapsed = true', function() {
+ var wrapperFn = function() {
+ $animate.flush();
+ };
+
+ scope.isCollapsed = true;
+ compileFn(scope);
+ scope.$digest();
+
+ expect(wrapperFn).toThrowError(/No pending animations ready to be closed or flushed/);
});
- it('should collapse if isCollapsed = true with animation on subsequent use', function() {
+ it('should collapse if isCollapsed = true on subsequent use', function() {
scope.isCollapsed = false;
+ compileFn(scope);
scope.$digest();
+ initCallbacks();
scope.isCollapsed = true;
scope.$digest();
- $animate.triggerCallbacks();
+ $animate.flush();
expect(element.height()).toBe(0);
+ assertCallbacks({ collapsing: true, collapsed: true });
});
- it('should be shown on initialization if isCollapsed = false without transition', function() {
+ it('should show after toggled from collapsed', function() {
+ initCallbacks();
+ scope.isCollapsed = true;
+ compileFn(scope);
+ scope.$digest();
+ expect(element.height()).toBe(0);
+ assertCallbacks({ collapsed: true });
+ scope.collapsed.calls.reset();
+
scope.isCollapsed = false;
scope.$digest();
- //No animation timeout here
+ $animate.flush();
expect(element.height()).not.toBe(0);
+ assertCallbacks({ expanding: true, expanded: true });
+ });
+
+ it('should not trigger any animation on initialization if isCollapsed = false', function() {
+ var wrapperFn = function() {
+ $animate.flush();
+ };
+
+ scope.isCollapsed = false;
+ compileFn(scope);
+ scope.$digest();
+
+ expect(wrapperFn).toThrowError(/No pending animations ready to be closed or flushed/);
});
- it('should expand if isCollapsed = false with animation on subsequent use', function() {
+ it('should expand if isCollapsed = false on subsequent use', function() {
scope.isCollapsed = false;
+ compileFn(scope);
scope.$digest();
scope.isCollapsed = true;
scope.$digest();
+ $animate.flush();
+ initCallbacks();
scope.isCollapsed = false;
scope.$digest();
- $animate.triggerCallbacks();
+ $animate.flush();
expect(element.height()).not.toBe(0);
+ assertCallbacks({ expanding: true, expanded: true });
});
- it('should expand if isCollapsed = true with animation on subsequent uses', function() {
+ it('should collapse if isCollapsed = true on subsequent uses', function() {
scope.isCollapsed = false;
+ compileFn(scope);
scope.$digest();
scope.isCollapsed = true;
scope.$digest();
+ $animate.flush();
scope.isCollapsed = false;
scope.$digest();
+ $animate.flush();
+ initCallbacks();
scope.isCollapsed = true;
scope.$digest();
- $animate.triggerCallbacks();
- expect(element.height()).toBe(0);
- $animate.triggerCallbacks();
+ $animate.flush();
expect(element.height()).toBe(0);
+ assertCallbacks({ collapsing: true, collapsed: true });
});
- describe('dynamic content', function() {
+ it('should change aria-expanded attribute', function() {
+ scope.isCollapsed = false;
+ compileFn(scope);
+ scope.$digest();
+ expect(element.attr('aria-expanded')).toBe('true');
+
+ scope.isCollapsed = true;
+ scope.$digest();
+ $animate.flush();
+ expect(element.attr('aria-expanded')).toBe('false');
+ });
+ it('should change aria-hidden attribute', function() {
+ scope.isCollapsed = false;
+ compileFn(scope);
+ scope.$digest();
+ expect(element.attr('aria-hidden')).toBe('false');
+
+ scope.isCollapsed = true;
+ scope.$digest();
+ $animate.flush();
+ expect(element.attr('aria-hidden')).toBe('true');
+ });
+
+ describe('dynamic content', function() {
var element;
beforeEach(function() {
- element = angular.element('Initial content
Additional content
Initial content
Additional content
'
+ + 'Some Content
');
+ compileFnH = $compile(elementH);
+ angular.element(document.body).append(elementH);
+ });
+
+ afterEach(function() {
+ elementH.remove();
+ });
+
+ function initCallbacks() {
+ scope.collapsing = jasmine.createSpy('scope.collapsing');
+ scope.collapsed = jasmine.createSpy('scope.collapsed');
+ scope.expanding = jasmine.createSpy('scope.expanding');
+ scope.expanded = jasmine.createSpy('scope.expanded');
+ }
+
+ function assertCallbacks(expected) {
+ ['collapsing', 'collapsed', 'expanding', 'expanded'].forEach(function(cbName) {
+ if (expected[cbName]) {
+ expect(scope[cbName]).toHaveBeenCalled();
+ } else {
+ expect(scope[cbName]).not.toHaveBeenCalled();
+ }
+ });
+ }
+
+ it('should be hidden on initialization if isCollapsed = true', function() {
+ initCallbacks();
+ scope.isCollapsed = true;
+ compileFnH(scope);
+ scope.$digest();
+ expect(elementH.width()).toBe(0);
+ assertCallbacks({ collapsed: true });
+ });
+
+ it('should not trigger any animation on initialization if isCollapsed = true', function() {
+ var wrapperFn = function() {
+ $animate.flush();
+ };
+
+ scope.isCollapsed = true;
+ compileFnH(scope);
+ scope.$digest();
+
+ expect(wrapperFn).toThrowError(/No pending animations ready to be closed or flushed/);
+ });
+
+ it('should collapse if isCollapsed = true on subsequent use', function() {
+ scope.isCollapsed = false;
+ compileFnH(scope);
+ scope.$digest();
+ initCallbacks();
+ scope.isCollapsed = true;
+ scope.$digest();
+ $animate.flush();
+ expect(elementH.width()).toBe(0);
+ assertCallbacks({ collapsing: true, collapsed: true });
+ });
+
+ it('should show after toggled from collapsed', function() {
+ initCallbacks();
+ scope.isCollapsed = true;
+ compileFnH(scope);
+ scope.$digest();
+ expect(elementH.width()).toBe(0);
+ assertCallbacks({ collapsed: true });
+ scope.collapsed.calls.reset();
+
+ scope.isCollapsed = false;
+ scope.$digest();
+ $animate.flush();
+ expect(elementH.width()).not.toBe(0);
+ assertCallbacks({ expanding: true, expanded: true });
+ });
+
+ it('should not trigger any animation on initialization if isCollapsed = false', function() {
+ var wrapperFn = function() {
+ $animate.flush();
+ };
+
+ scope.isCollapsed = false;
+ compileFnH(scope);
+ scope.$digest();
+
+ expect(wrapperFn).toThrowError(/No pending animations ready to be closed or flushed/);
+ });
+
+ it('should expand if isCollapsed = false on subsequent use', function() {
+ scope.isCollapsed = false;
+ compileFnH(scope);
+ scope.$digest();
+ scope.isCollapsed = true;
+ scope.$digest();
+ $animate.flush();
+ initCallbacks();
+ scope.isCollapsed = false;
+ scope.$digest();
+ $animate.flush();
+ expect(elementH.width()).not.toBe(0);
+ assertCallbacks({ expanding: true, expanded: true });
+ });
+
+ it('should collapse if isCollapsed = true on subsequent uses', function() {
+ scope.isCollapsed = false;
+ compileFnH(scope);
+ scope.$digest();
+ scope.isCollapsed = true;
+ scope.$digest();
+ $animate.flush();
+ scope.isCollapsed = false;
+ scope.$digest();
+ $animate.flush();
+ initCallbacks();
+ scope.isCollapsed = true;
+ scope.$digest();
+ $animate.flush();
+ expect(elementH.width()).toBe(0);
+ assertCallbacks({ collapsing: true, collapsed: true });
+ });
+
+ it('should change aria-expanded attribute', function() {
+ scope.isCollapsed = false;
+ compileFnH(scope);
+ scope.$digest();
+ expect(elementH.attr('aria-expanded')).toBe('true');
+
+ scope.isCollapsed = true;
+ scope.$digest();
+ $animate.flush();
+ expect(elementH.attr('aria-expanded')).toBe('false');
+ });
+
+ it('should change aria-hidden attribute', function() {
+ scope.isCollapsed = false;
+ compileFnH(scope);
+ scope.$digest();
+ expect(elementH.attr('aria-hidden')).toBe('false');
+
+ scope.isCollapsed = true;
+ scope.$digest();
+ $animate.flush();
+ expect(elementH.attr('aria-hidden')).toBe('true');
+ });
+
+ describe('expanding callback returning a promise', function() {
+ var defer, collapsedWidth;
+
+ beforeEach(function() {
+ defer = $q.defer();
+
+ scope.isCollapsed = true;
+ scope.expanding = function() {
+ return defer.promise;
+ };
+ compileFnH(scope);
+ scope.$digest();
+ collapsedWidth = elementH.width();
+
+ // set flag to expand ...
+ scope.isCollapsed = false;
+ scope.$digest();
+
+ // ... shouldn't expand yet ...
+ expect(elementH.attr('aria-expanded')).not.toBe('true');
+ expect(elementH.width()).toBe(collapsedWidth);
+ });
+
+ it('should wait for it to resolve before animating', function() {
+ defer.resolve();
+
+ // should now expand
+ scope.$digest();
+ $animate.flush();
+
+ expect(elementH.attr('aria-expanded')).toBe('true');
+ expect(elementH.width()).toBeGreaterThan(collapsedWidth);
+ });
+
+ it('should not animate if it rejects', function() {
+ defer.reject();
+
+ // should NOT expand
+ scope.$digest();
+
+ expect(elementH.attr('aria-expanded')).not.toBe('true');
+ expect(elementH.width()).toBe(collapsedWidth);
+ });
+ });
+
+ describe('collapsing callback returning a promise', function() {
+ var defer, expandedWidth;
+
+ beforeEach(function() {
+ defer = $q.defer();
+ scope.isCollapsed = false;
+ scope.collapsing = function() {
+ return defer.promise;
+ };
+ compileFnH(scope);
+ scope.$digest();
+
+ expandedWidth = elementH.width();
+
+ // set flag to collapse ...
+ scope.isCollapsed = true;
+ scope.$digest();
+
+ // ... but it shouldn't collapse yet ...
+ expect(elementH.attr('aria-expanded')).not.toBe('false');
+ expect(elementH.width()).toBe(expandedWidth);
+ });
+
+ it('should wait for it to resolve before animating', function() {
+ defer.resolve();
+
+ // should now collapse
+ scope.$digest();
+ $animate.flush();
+
+ expect(elementH.attr('aria-expanded')).toBe('false');
+ expect(elementH.width()).toBeLessThan(expandedWidth);
+ });
+
+ it('should not animate if it rejects', function() {
+ defer.reject();
+
+ // should NOT collapse
+ scope.$digest();
+
+ expect(elementH.attr('aria-expanded')).not.toBe('false');
+ expect(elementH.width()).toBe(expandedWidth);
+ });
+ });
+
+});
diff --git a/src/dateparser/dateparser.js b/src/dateparser/dateparser.js
index eb323623b6..d770dff31b 100644
--- a/src/dateparser/dateparser.js
+++ b/src/dateparser/dateparser.js
@@ -1,102 +1,317 @@
angular.module('ui.bootstrap.dateparser', [])
-.service('dateParser', ['$locale', 'orderByFilter', function($locale, orderByFilter) {
+.service('uibDateParser', ['$log', '$locale', 'dateFilter', 'orderByFilter', 'filterFilter', function($log, $locale, dateFilter, orderByFilter, filterFilter) {
// Pulled from https://github.com/mbostock/d3/blob/master/src/format/requote.js
var SPECIAL_CHARACTERS_REGEXP = /[\\\^\$\*\+\?\|\[\]\(\)\.\{\}]/g;
- this.parsers = {};
-
- var formatCodeToRegex = {
- 'yyyy': {
- regex: '\\d{4}',
- apply: function(value) { this.year = +value; }
- },
- 'yy': {
- regex: '\\d{2}',
- apply: function(value) { this.year = +value + 2000; }
- },
- 'y': {
- regex: '\\d{1,4}',
- apply: function(value) { this.year = +value; }
- },
- 'MMMM': {
- regex: $locale.DATETIME_FORMATS.MONTH.join('|'),
- apply: function(value) { this.month = $locale.DATETIME_FORMATS.MONTH.indexOf(value); }
- },
- 'MMM': {
- regex: $locale.DATETIME_FORMATS.SHORTMONTH.join('|'),
- apply: function(value) { this.month = $locale.DATETIME_FORMATS.SHORTMONTH.indexOf(value); }
- },
- 'MM': {
- regex: '0[1-9]|1[0-2]',
- apply: function(value) { this.month = value - 1; }
- },
- 'M': {
- regex: '[1-9]|1[0-2]',
- apply: function(value) { this.month = value - 1; }
- },
- 'dd': {
- regex: '[0-2][0-9]{1}|3[0-1]{1}',
- apply: function(value) { this.date = +value; }
- },
- 'd': {
- regex: '[1-2]?[0-9]{1}|3[0-1]{1}',
- apply: function(value) { this.date = +value; }
- },
- 'EEEE': {
- regex: $locale.DATETIME_FORMATS.DAY.join('|')
- },
- 'EEE': {
- regex: $locale.DATETIME_FORMATS.SHORTDAY.join('|')
- },
- 'HH': {
- regex: '(?:0|1)[0-9]|2[0-3]',
- apply: function(value) { this.hours = +value; }
- },
- 'H': {
- regex: '1?[0-9]|2[0-3]',
- apply: function(value) { this.hours = +value; }
- },
- 'mm': {
- regex: '[0-5][0-9]',
- apply: function(value) { this.minutes = +value; }
- },
- 'm': {
- regex: '[0-9]|[1-5][0-9]',
- apply: function(value) { this.minutes = +value; }
- },
- 'sss': {
- regex: '[0-9][0-9][0-9]',
- apply: function(value) { this.milliseconds = +value; }
- },
- 'ss': {
- regex: '[0-5][0-9]',
- apply: function(value) { this.seconds = +value; }
- },
- 's': {
- regex: '[0-9]|[1-5][0-9]',
- apply: function(value) { this.seconds = +value; }
+ var localeId;
+ var formatCodeToRegex;
+
+ this.init = function() {
+ localeId = $locale.id;
+
+ this.parsers = {};
+ this.formatters = {};
+
+ formatCodeToRegex = [
+ {
+ key: 'yyyy',
+ regex: '\\d{4}',
+ apply: function(value) { this.year = +value; },
+ formatter: function(date) {
+ var _date = new Date();
+ _date.setFullYear(Math.abs(date.getFullYear()));
+ return dateFilter(_date, 'yyyy');
+ }
+ },
+ {
+ key: 'yy',
+ regex: '\\d{2}',
+ apply: function(value) { value = +value; this.year = value < 69 ? value + 2000 : value + 1900; },
+ formatter: function(date) {
+ var _date = new Date();
+ _date.setFullYear(Math.abs(date.getFullYear()));
+ return dateFilter(_date, 'yy');
+ }
+ },
+ {
+ key: 'y',
+ regex: '\\d{1,4}',
+ apply: function(value) { this.year = +value; },
+ formatter: function(date) {
+ var _date = new Date();
+ _date.setFullYear(Math.abs(date.getFullYear()));
+ return dateFilter(_date, 'y');
+ }
+ },
+ {
+ key: 'M!',
+ regex: '0?[1-9]|1[0-2]',
+ apply: function(value) { this.month = value - 1; },
+ formatter: function(date) {
+ var value = date.getMonth();
+ if (/^[0-9]$/.test(value)) {
+ return dateFilter(date, 'MM');
+ }
+
+ return dateFilter(date, 'M');
+ }
+ },
+ {
+ key: 'MMMM',
+ regex: $locale.DATETIME_FORMATS.MONTH.join('|'),
+ apply: function(value) { this.month = $locale.DATETIME_FORMATS.MONTH.indexOf(value); },
+ formatter: function(date) { return dateFilter(date, 'MMMM'); }
+ },
+ {
+ key: 'MMM',
+ regex: $locale.DATETIME_FORMATS.SHORTMONTH.join('|'),
+ apply: function(value) { this.month = $locale.DATETIME_FORMATS.SHORTMONTH.indexOf(value); },
+ formatter: function(date) { return dateFilter(date, 'MMM'); }
+ },
+ {
+ key: 'MM',
+ regex: '0[1-9]|1[0-2]',
+ apply: function(value) { this.month = value - 1; },
+ formatter: function(date) { return dateFilter(date, 'MM'); }
+ },
+ {
+ key: 'M',
+ regex: '[1-9]|1[0-2]',
+ apply: function(value) { this.month = value - 1; },
+ formatter: function(date) { return dateFilter(date, 'M'); }
+ },
+ {
+ key: 'd!',
+ regex: '[0-2]?[0-9]{1}|3[0-1]{1}',
+ apply: function(value) { this.date = +value; },
+ formatter: function(date) {
+ var value = date.getDate();
+ if (/^[1-9]$/.test(value)) {
+ return dateFilter(date, 'dd');
+ }
+
+ return dateFilter(date, 'd');
+ }
+ },
+ {
+ key: 'dd',
+ regex: '[0-2][0-9]{1}|3[0-1]{1}',
+ apply: function(value) { this.date = +value; },
+ formatter: function(date) { return dateFilter(date, 'dd'); }
+ },
+ {
+ key: 'd',
+ regex: '[1-2]?[0-9]{1}|3[0-1]{1}',
+ apply: function(value) { this.date = +value; },
+ formatter: function(date) { return dateFilter(date, 'd'); }
+ },
+ {
+ key: 'EEEE',
+ regex: $locale.DATETIME_FORMATS.DAY.join('|'),
+ formatter: function(date) { return dateFilter(date, 'EEEE'); }
+ },
+ {
+ key: 'EEE',
+ regex: $locale.DATETIME_FORMATS.SHORTDAY.join('|'),
+ formatter: function(date) { return dateFilter(date, 'EEE'); }
+ },
+ {
+ key: 'HH',
+ regex: '(?:0|1)[0-9]|2[0-3]',
+ apply: function(value) { this.hours = +value; },
+ formatter: function(date) { return dateFilter(date, 'HH'); }
+ },
+ {
+ key: 'hh',
+ regex: '0[0-9]|1[0-2]',
+ apply: function(value) { this.hours = +value; },
+ formatter: function(date) { return dateFilter(date, 'hh'); }
+ },
+ {
+ key: 'H',
+ regex: '1?[0-9]|2[0-3]',
+ apply: function(value) { this.hours = +value; },
+ formatter: function(date) { return dateFilter(date, 'H'); }
+ },
+ {
+ key: 'h',
+ regex: '[0-9]|1[0-2]',
+ apply: function(value) { this.hours = +value; },
+ formatter: function(date) { return dateFilter(date, 'h'); }
+ },
+ {
+ key: 'mm',
+ regex: '[0-5][0-9]',
+ apply: function(value) { this.minutes = +value; },
+ formatter: function(date) { return dateFilter(date, 'mm'); }
+ },
+ {
+ key: 'm',
+ regex: '[0-9]|[1-5][0-9]',
+ apply: function(value) { this.minutes = +value; },
+ formatter: function(date) { return dateFilter(date, 'm'); }
+ },
+ {
+ key: 'sss',
+ regex: '[0-9][0-9][0-9]',
+ apply: function(value) { this.milliseconds = +value; },
+ formatter: function(date) { return dateFilter(date, 'sss'); }
+ },
+ {
+ key: 'ss',
+ regex: '[0-5][0-9]',
+ apply: function(value) { this.seconds = +value; },
+ formatter: function(date) { return dateFilter(date, 'ss'); }
+ },
+ {
+ key: 's',
+ regex: '[0-9]|[1-5][0-9]',
+ apply: function(value) { this.seconds = +value; },
+ formatter: function(date) { return dateFilter(date, 's'); }
+ },
+ {
+ key: 'a',
+ regex: $locale.DATETIME_FORMATS.AMPMS.join('|'),
+ apply: function(value) {
+ if (this.hours === 12) {
+ this.hours = 0;
+ }
+
+ if (value === 'PM') {
+ this.hours += 12;
+ }
+ },
+ formatter: function(date) { return dateFilter(date, 'a'); }
+ },
+ {
+ key: 'Z',
+ regex: '[+-]\\d{4}',
+ apply: function(value) {
+ var matches = value.match(/([+-])(\d{2})(\d{2})/),
+ sign = matches[1],
+ hours = matches[2],
+ minutes = matches[3];
+ this.hours += toInt(sign + hours);
+ this.minutes += toInt(sign + minutes);
+ },
+ formatter: function(date) {
+ return dateFilter(date, 'Z');
+ }
+ },
+ {
+ key: 'ww',
+ regex: '[0-4][0-9]|5[0-3]',
+ formatter: function(date) { return dateFilter(date, 'ww'); }
+ },
+ {
+ key: 'w',
+ regex: '[0-9]|[1-4][0-9]|5[0-3]',
+ formatter: function(date) { return dateFilter(date, 'w'); }
+ },
+ {
+ key: 'GGGG',
+ regex: $locale.DATETIME_FORMATS.ERANAMES.join('|').replace(/\s/g, '\\s'),
+ formatter: function(date) { return dateFilter(date, 'GGGG'); }
+ },
+ {
+ key: 'GGG',
+ regex: $locale.DATETIME_FORMATS.ERAS.join('|'),
+ formatter: function(date) { return dateFilter(date, 'GGG'); }
+ },
+ {
+ key: 'GG',
+ regex: $locale.DATETIME_FORMATS.ERAS.join('|'),
+ formatter: function(date) { return dateFilter(date, 'GG'); }
+ },
+ {
+ key: 'G',
+ regex: $locale.DATETIME_FORMATS.ERAS.join('|'),
+ formatter: function(date) { return dateFilter(date, 'G'); }
+ }
+ ];
+
+ if (angular.version.major >= 1 && angular.version.minor > 4) {
+ formatCodeToRegex.push({
+ key: 'LLLL',
+ regex: $locale.DATETIME_FORMATS.STANDALONEMONTH.join('|'),
+ apply: function(value) { this.month = $locale.DATETIME_FORMATS.STANDALONEMONTH.indexOf(value); },
+ formatter: function(date) { return dateFilter(date, 'LLLL'); }
+ });
}
};
+ this.init();
+
+ function getFormatCodeToRegex(key) {
+ return filterFilter(formatCodeToRegex, {key: key}, true)[0];
+ }
+
+ this.getParser = function (key) {
+ var f = getFormatCodeToRegex(key);
+ return f && f.apply || null;
+ };
+
+ this.overrideParser = function (key, parser) {
+ var f = getFormatCodeToRegex(key);
+ if (f && angular.isFunction(parser)) {
+ this.parsers = {};
+ f.apply = parser;
+ }
+ }.bind(this);
+
function createParser(format) {
var map = [], regex = format.split('');
- angular.forEach(formatCodeToRegex, function(data, code) {
- var index = format.indexOf(code);
+ // check for literal values
+ var quoteIndex = format.indexOf('\'');
+ if (quoteIndex > -1) {
+ var inLiteral = false;
+ format = format.split('');
+ for (var i = quoteIndex; i < format.length; i++) {
+ if (inLiteral) {
+ if (format[i] === '\'') {
+ if (i + 1 < format.length && format[i+1] === '\'') { // escaped single quote
+ format[i+1] = '$';
+ regex[i+1] = '';
+ } else { // end of literal
+ regex[i] = '';
+ inLiteral = false;
+ }
+ }
+ format[i] = '$';
+ } else {
+ if (format[i] === '\'') { // start of literal
+ format[i] = '$';
+ regex[i] = '';
+ inLiteral = true;
+ }
+ }
+ }
+
+ format = format.join('');
+ }
+
+ angular.forEach(formatCodeToRegex, function(data) {
+ var index = format.indexOf(data.key);
if (index > -1) {
format = format.split('');
regex[index] = '(' + data.regex + ')';
format[index] = '$'; // Custom symbol to define consumed part of format
- for (var i = index + 1, n = index + code.length; i < n; i++) {
+ for (var i = index + 1, n = index + data.key.length; i < n; i++) {
regex[i] = '';
format[i] = '$';
}
format = format.join('');
- map.push({ index: index, apply: data.apply });
+ map.push({
+ index: index,
+ key: data.key,
+ apply: data.apply,
+ matcher: data.regex
+ });
}
});
@@ -106,26 +321,116 @@ angular.module('ui.bootstrap.dateparser', [])
};
}
+ function createFormatter(format) {
+ var formatters = [];
+ var i = 0;
+ var formatter, literalIdx;
+ while (i < format.length) {
+ if (angular.isNumber(literalIdx)) {
+ if (format.charAt(i) === '\'') {
+ if (i + 1 >= format.length || format.charAt(i + 1) !== '\'') {
+ formatters.push(constructLiteralFormatter(format, literalIdx, i));
+ literalIdx = null;
+ }
+ } else if (i === format.length) {
+ while (literalIdx < format.length) {
+ formatter = constructFormatterFromIdx(format, literalIdx);
+ formatters.push(formatter);
+ literalIdx = formatter.endIdx;
+ }
+ }
+
+ i++;
+ continue;
+ }
+
+ if (format.charAt(i) === '\'') {
+ literalIdx = i;
+ i++;
+ continue;
+ }
+
+ formatter = constructFormatterFromIdx(format, i);
+
+ formatters.push(formatter.parser);
+ i = formatter.endIdx;
+ }
+
+ return formatters;
+ }
+
+ function constructLiteralFormatter(format, literalIdx, endIdx) {
+ return function() {
+ return format.substr(literalIdx + 1, endIdx - literalIdx - 1);
+ };
+ }
+
+ function constructFormatterFromIdx(format, i) {
+ var currentPosStr = format.substr(i);
+ for (var j = 0; j < formatCodeToRegex.length; j++) {
+ if (new RegExp('^' + formatCodeToRegex[j].key).test(currentPosStr)) {
+ var data = formatCodeToRegex[j];
+ return {
+ endIdx: i + data.key.length,
+ parser: data.formatter
+ };
+ }
+ }
+
+ return {
+ endIdx: i + 1,
+ parser: function() {
+ return currentPosStr.charAt(0);
+ }
+ };
+ }
+
+ this.filter = function(date, format) {
+ if (!angular.isDate(date) || isNaN(date) || !format) {
+ return '';
+ }
+
+ format = $locale.DATETIME_FORMATS[format] || format;
+
+ if ($locale.id !== localeId) {
+ this.init();
+ }
+
+ if (!this.formatters[format]) {
+ this.formatters[format] = createFormatter(format);
+ }
+
+ var formatters = this.formatters[format];
+
+ return formatters.reduce(function(str, formatter) {
+ return str + formatter(date);
+ }, '');
+ };
+
this.parse = function(input, format, baseDate) {
- if ( !angular.isString(input) || !format ) {
+ if (!angular.isString(input) || !format) {
return input;
}
format = $locale.DATETIME_FORMATS[format] || format;
format = format.replace(SPECIAL_CHARACTERS_REGEXP, '\\$&');
- if ( !this.parsers[format] ) {
- this.parsers[format] = createParser(format);
+ if ($locale.id !== localeId) {
+ this.init();
+ }
+
+ if (!this.parsers[format]) {
+ this.parsers[format] = createParser(format, 'apply');
}
var parser = this.parsers[format],
regex = parser.regex,
map = parser.map,
- results = input.match(regex);
-
- if ( results && results.length ) {
+ results = input.match(regex),
+ tzOffset = false;
+ if (results && results.length) {
var fields, dt;
- if (baseDate) {
+ if (angular.isDate(baseDate) && !isNaN(baseDate.getTime())) {
fields = {
year: baseDate.getFullYear(),
month: baseDate.getMonth(),
@@ -136,19 +441,40 @@ angular.module('ui.bootstrap.dateparser', [])
milliseconds: baseDate.getMilliseconds()
};
} else {
+ if (baseDate) {
+ $log.warn('dateparser:', 'baseDate is not a valid date');
+ }
fields = { year: 1900, month: 0, date: 1, hours: 0, minutes: 0, seconds: 0, milliseconds: 0 };
}
- for( var i = 1, n = results.length; i < n; i++ ) {
- var mapper = map[i-1];
- if ( mapper.apply ) {
+ for (var i = 1, n = results.length; i < n; i++) {
+ var mapper = map[i - 1];
+ if (mapper.matcher === 'Z') {
+ tzOffset = true;
+ }
+
+ if (mapper.apply) {
mapper.apply.call(fields, results[i]);
}
}
- if ( isValid(fields.year, fields.month, fields.date) ) {
- dt = new Date(fields.year, fields.month, fields.date, fields.hours, fields.minutes, fields.seconds,
- fields.milliseconds || 0);
+ var datesetter = tzOffset ? Date.prototype.setUTCFullYear :
+ Date.prototype.setFullYear;
+ var timesetter = tzOffset ? Date.prototype.setUTCHours :
+ Date.prototype.setHours;
+
+ if (isValid(fields.year, fields.month, fields.date)) {
+ if (angular.isDate(baseDate) && !isNaN(baseDate.getTime()) && !tzOffset) {
+ dt = new Date(baseDate);
+ datesetter.call(dt, fields.year, fields.month, fields.date);
+ timesetter.call(dt, fields.hours, fields.minutes,
+ fields.seconds, fields.milliseconds);
+ } else {
+ dt = new Date(0);
+ datesetter.call(dt, fields.year, fields.month, fields.date);
+ timesetter.call(dt, fields.hours || 0, fields.minutes || 0,
+ fields.seconds || 0, fields.milliseconds || 0);
+ }
}
return dt;
@@ -162,14 +488,52 @@ angular.module('ui.bootstrap.dateparser', [])
return false;
}
- if ( month === 1 && date > 28) {
- return date === 29 && ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0);
+ if (month === 1 && date > 28) {
+ return date === 29 && (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0);
}
- if ( month === 3 || month === 5 || month === 8 || month === 10) {
- return date < 31;
+ if (month === 3 || month === 5 || month === 8 || month === 10) {
+ return date < 31;
}
return true;
}
+
+ function toInt(str) {
+ return parseInt(str, 10);
+ }
+
+ this.toTimezone = toTimezone;
+ this.fromTimezone = fromTimezone;
+ this.timezoneToOffset = timezoneToOffset;
+ this.addDateMinutes = addDateMinutes;
+ this.convertTimezoneToLocal = convertTimezoneToLocal;
+
+ function toTimezone(date, timezone) {
+ return date && timezone ? convertTimezoneToLocal(date, timezone) : date;
+ }
+
+ function fromTimezone(date, timezone) {
+ return date && timezone ? convertTimezoneToLocal(date, timezone, true) : date;
+ }
+
+ //https://github.com/angular/angular.js/blob/622c42169699ec07fc6daaa19fe6d224e5d2f70e/src/Angular.js#L1207
+ function timezoneToOffset(timezone, fallback) {
+ timezone = timezone.replace(/:/g, '');
+ var requestedTimezoneOffset = Date.parse('Jan 01, 1970 00:00:00 ' + timezone) / 60000;
+ return isNaN(requestedTimezoneOffset) ? fallback : requestedTimezoneOffset;
+ }
+
+ function addDateMinutes(date, minutes) {
+ date = new Date(date.getTime());
+ date.setMinutes(date.getMinutes() + minutes);
+ return date;
+ }
+
+ function convertTimezoneToLocal(date, timezone, reverse) {
+ reverse = reverse ? -1 : 1;
+ var dateTimezoneOffset = date.getTimezoneOffset();
+ var timezoneOffset = timezoneToOffset(timezone, dateTimezoneOffset);
+ return addDateMinutes(date, reverse * (timezoneOffset - dateTimezoneOffset));
+ }
}]);
diff --git a/src/dateparser/docs/README.md b/src/dateparser/docs/README.md
new file mode 100644
index 0000000000..f7a3b3434f
--- /dev/null
+++ b/src/dateparser/docs/README.md
@@ -0,0 +1,147 @@
+The `uibDateParser` is what the `uib-datepicker` uses internally to parse the dates. You can use it standalone by injecting the `uibDateParser` service where you need it.
+
+The public API for the dateParser is a single method called `parse`.
+
+Certain format codes support i18n. Check this [guide](https://docs.angularjs.org/guide/i18n) for more information.
+
+### uibDateParser's parse function
+
+##### parameters
+
+* `input`
+ _(Type: `string`, Example: `2004/Sep/4`)_ -
+ The input date to parse.
+
+* `format`
+ _(Type: `string`, Example: `yyyy/MMM/d`)_ -
+ The format we want to use. Check all the supported formats below.
+
+* `baseDate`
+ _(Type: `Date`, Example: `new Date()`)_ -
+ If you want to parse a date but maintain the timezone, you can pass an existing date here.
+
+##### return
+
+* If the specified input matches the format, a new date with the input will be returned, otherwise, it will return undefined.
+
+### uibDateParser's format codes
+
+* `yyyy`
+ _(Example: `2015`)_ -
+ Parses a 4 digits year.
+
+* `yy`
+ _(Example: `15`)_ -
+ Parses a 2 digits year.
+
+* `y`
+ _(Example: `15`)_ -
+ Parses a year with 1, 2, 3, or 4 digits.
+
+* `MMMM`
+ _(Example: `February`, i18n support)_ -
+ Parses the full name of a month.
+
+* `MMM`
+ _(Example: `Feb`, i18n support)_ -
+ Parses the short name of a month.
+
+* `MM`
+ _(Example: `12`, Leading 0)_ -
+ Parses a numeric month.
+
+* `M`
+ _(Example: `3`)_ -
+ Parses a numeric month.
+
+* `M!`
+ _(Example: `3` or `03`)_ -
+ Parses a numeric month, but allowing an optional leading zero
+
+* `LLLL`
+ _(Example: `February`, i18n support)_ - Stand-alone month in year (January-December). Requires Angular version 1.5.1 or higher.
+
+* `dd`
+ _(Example: `05`, Leading 0)_ -
+ Parses a numeric day.
+
+* `d`
+ _(Example: `5`)_ -
+ Parses a numeric day.
+
+* `d!`
+ _(Example: `3` or `03`)_ -
+ Parses a numeric day, but allowing an optional leading zero
+
+* `EEEE`
+ _(Example: `Sunday`, i18n support)_ -
+ Parses the full name of a day.
+
+* `EEE`
+ _(Example: `Mon`, i18n support)_ -
+ Parses the short name of a day.
+
+* `HH`
+ _(Example: `14`, Leading 0)_ -
+ Parses a 24 hours time.
+
+* `H`
+ _(Example: `3`)_ -
+ Parses a 24 hours time.
+
+* `hh`
+ _(Example: `11`, Leading 0)_ -
+ Parses a 12 hours time.
+
+* `h`
+ _(Example: `3`)_ -
+ Parses a 12 hours time.
+
+* `mm`
+ _(Example: `09`, Leading 0)_ -
+ Parses the minutes.
+
+* `m`
+ _(Example: `3`)_ -
+ Parses the minutes.
+
+* `sss`
+ _(Example: `094`, Leading 0)_ -
+ Parses the milliseconds.
+
+* `ss`
+ _(Example: `08`, Leading 0)_ -
+ Parses the seconds.
+
+* `s`
+ _(Example: `22`)_ -
+ Parses the seconds.
+
+* `a`
+ _(Example: `10AM`)_ -
+ Parses a 12 hours time with AM/PM.
+
+* `Z`
+ _(Example: `-0800`)_ -
+ Parses the timezone offset in a signed 4 digit representation
+
+* `ww`
+ _(Example: `03`, Leading 0)_ -
+ Parses the week number
+
+* `w`
+ _(Example: `03`)_ -
+ Parses the week number
+
+* `G`, `GG`, `GGG`
+ _(Example: `AD`)_ -
+ Parses the era (`AD` or `BC`)
+* `GGGG`
+ _(Example: `Anno Domini`)_ -
+ Parses the long form of the era (`Anno Domini` or `Before Christ`)
+
+\* The ones marked with `Leading 0`, needs a leading 0 for values less than 10. Exception being milliseconds which needs it for values under 100.
+
+\** It also supports `fullDate|longDate|medium|mediumDate|mediumTime|short|shortDate|shortTime` as the format for parsing.
+
+\*** It supports template literals as a string between the single quote `'` character, i.e. `'The Date is' MM/DD/YYYY`. If one wants the literal single quote character, one must use `''''`.
diff --git a/src/dateparser/docs/demo.html b/src/dateparser/docs/demo.html
new file mode 100644
index 0000000000..2467d43206
--- /dev/null
+++ b/src/dateparser/docs/demo.html
@@ -0,0 +1,11 @@
+
+
diff --git a/src/dateparser/docs/demo.js b/src/dateparser/docs/demo.js
new file mode 100644
index 0000000000..df9976ea99
--- /dev/null
+++ b/src/dateparser/docs/demo.js
@@ -0,0 +1,4 @@
+angular.module('ui.bootstrap.demo').controller('DateParserDemoCtrl', function ($scope, uibDateParser) {
+ $scope.format = 'yyyy/MM/dd';
+ $scope.date = new Date();
+});
diff --git a/src/dateparser/index.js b/src/dateparser/index.js
new file mode 100644
index 0000000000..2320dec7d8
--- /dev/null
+++ b/src/dateparser/index.js
@@ -0,0 +1,7 @@
+require('./dateparser');
+
+var MODULE_NAME = 'ui.bootstrap.module.dateparser';
+
+angular.module(MODULE_NAME, ['ui.bootstrap.dateparser']);
+
+module.exports = MODULE_NAME;
diff --git a/src/dateparser/test/dateparser.spec.js b/src/dateparser/test/dateparser.spec.js
index 7ed6bb0e58..70c4b3e4f8 100644
--- a/src/dateparser/test/dateparser.spec.js
+++ b/src/dateparser/test/dateparser.spec.js
@@ -1,15 +1,282 @@
-describe('date parser', function () {
- var dateParser;
+describe('date parser', function() {
+ var dateParser, oldDate;
beforeEach(module('ui.bootstrap.dateparser'));
- beforeEach(inject(function (_dateParser_) {
- dateParser = _dateParser_;
+ beforeEach(inject(function (uibDateParser) {
+ dateParser = uibDateParser;
+ oldDate = new Date(1, 2, 6);
+ oldDate.setFullYear(1);
}));
+ function expectFilter(date, format, display) {
+ expect(dateParser.filter(date, format)).toEqual(display);
+ }
+
function expectParse(input, format, date) {
expect(dateParser.parse(input, format)).toEqual(date);
}
+ function expectBaseParse(input, format, baseDate, date) {
+ expect(dateParser.parse(input, format, baseDate)).toEqual(date);
+ }
+
+ describe('filter', function() {
+ it('should work correctly for `dd`, `MM`, `yyyy`', function() {
+ expectFilter(new Date(2013, 10, 17, 0), 'dd.MM.yyyy', '17.11.2013');
+ expectFilter(new Date(2013, 11, 31, 0), 'dd.MM.yyyy', '31.12.2013');
+ expectFilter(new Date(1991, 2, 8, 0), 'dd-MM-yyyy', '08-03-1991');
+ expectFilter(new Date(1980, 2, 5, 0), 'MM/dd/yyyy', '03/05/1980');
+ expectFilter(new Date(1983, 0, 10, 0), 'dd.MM/yyyy', '10.01/1983');
+ expectFilter(new Date(1980, 10, 9, 0), 'MM-dd-yyyy', '11-09-1980');
+ expectFilter(new Date(2011, 1, 5, 0), 'yyyy/MM/dd', '2011/02/05');
+ expectFilter(oldDate, 'yyyy/MM/dd', '0001/03/06');
+ });
+
+ it('should work correctly for `yy`', function() {
+ expectFilter(new Date(2013, 10, 17, 0), 'dd.MM.yy', '17.11.13');
+ expectFilter(new Date(2011, 4, 2, 0), 'dd-MM-yy', '02-05-11');
+ expectFilter(new Date(2080, 1, 5, 0), 'MM/dd/yy', '02/05/80');
+ expectFilter(new Date(2055, 1, 5, 0), 'yy/MM/dd', '55/02/05');
+ expectFilter(new Date(2013, 7, 11, 0), 'dd-MM-yy', '11-08-13');
+ });
+
+ it('should work correctly for `y`', function() {
+ expectFilter(new Date(2013, 10, 17, 0), 'dd.MM.y', '17.11.2013');
+ expectFilter(new Date(2013, 11, 31, 0), 'dd.MM.y', '31.12.2013');
+ expectFilter(new Date(1991, 2, 8, 0), 'dd-MM-y', '08-03-1991');
+ expectFilter(new Date(1980, 2, 5, 0), 'MM/dd/y', '03/05/1980');
+ expectFilter(new Date(1983, 0, 10, 0), 'dd.MM/y', '10.01/1983');
+ expectFilter(new Date(1980, 10, 9, 0), 'MM-dd-y', '11-09-1980');
+ expectFilter(new Date(2011, 1, 5, 0), 'y/MM/dd', '2011/02/05');
+ });
+
+ it('should work correctly for `MMMM`', function() {
+ expectFilter(new Date(2013, 10, 17, 0), 'dd.MMMM.yy', '17.November.13');
+ expectFilter(new Date(1980, 2, 5, 0), 'dd-MMMM-yyyy', '05-March-1980');
+ expectFilter(new Date(1980, 1, 5, 0), 'MMMM/dd/yyyy', 'February/05/1980');
+ expectFilter(new Date(1949, 11, 20, 0), 'yyyy/MMMM/dd', '1949/December/20');
+ expectFilter(oldDate, 'yyyy/MMMM/dd', '0001/March/06');
+ });
+
+ it('should work correctly for `MMM`', function() {
+ expectFilter(new Date(2010, 8, 30, 0), 'dd.MMM.yy', '30.Sep.10');
+ expectFilter(new Date(2011, 4, 2, 0), 'dd-MMM-yy', '02-May-11');
+ expectFilter(new Date(1980, 1, 5, 0), 'MMM/dd/yyyy', 'Feb/05/1980');
+ expectFilter(new Date(1955, 1, 5, 0), 'yyyy/MMM/dd', '1955/Feb/05');
+ expectFilter(oldDate, 'yyyy/MMM/dd', '0001/Mar/06');
+ });
+
+ it('should work correctly for `M`', function() {
+ expectFilter(new Date(2013, 7, 11, 0), 'M/dd/yyyy', '8/11/2013');
+ expectFilter(new Date(2005, 10, 7, 0), 'dd.M.yy', '07.11.05');
+ expectFilter(new Date(2011, 4, 2, 0), 'dd-M-yy', '02-5-11');
+ expectFilter(new Date(1980, 1, 5, 0), 'M/dd/yyyy', '2/05/1980');
+ expectFilter(new Date(1955, 1, 5, 0), 'yyyy/M/dd', '1955/2/05');
+ expectFilter(new Date(2011, 4, 2, 0), 'dd-M-yy', '02-5-11');
+ });
+
+ it('should work correctly for `M!`', function() {
+ expectFilter(new Date(2013, 7, 11, 0), 'M!/dd/yyyy', '08/11/2013');
+ expectFilter(new Date(2005, 10, 7, 0), 'dd.M!.yy', '07.11.05');
+ expectFilter(new Date(2011, 4, 2, 0), 'dd-M!-yy', '02-05-11');
+ expectFilter(new Date(1980, 1, 5, 0), 'M!/dd/yyyy', '02/05/1980');
+ expectFilter(new Date(1955, 1, 5, 0), 'yyyy/M!/dd', '1955/02/05');
+ expectFilter(new Date(2011, 4, 2, 0), 'dd-M!-yy', '02-05-11');
+ expectFilter(oldDate, 'yyyy/M!/dd', '0001/03/06');
+ });
+
+ it('should work correctly for `LLLL`', function() {
+ expectFilter(new Date(2013, 7, 24, 0), 'LLLL/dd/yyyy', 'August/24/2013');
+ expectFilter(new Date(2004, 10, 7, 0), 'dd.LLLL.yy', '07.November.04');
+ expectFilter(new Date(2011, 4, 18, 0), 'dd-LLLL-yy', '18-May-11');
+ expectFilter(new Date(1980, 1, 5, 0), 'LLLL/dd/yyyy', 'February/05/1980');
+ expectFilter(new Date(1955, 2, 5, 0), 'yyyy/LLLL/dd', '1955/March/05');
+ expectFilter(new Date(2011, 5, 2, 0), 'dd-LLLL-yy', '02-June-11');
+ expectFilter(oldDate, 'yyyy/LLLL/dd', '0001/March/06');
+ });
+
+ it('should work correctly for `d`', function() {
+ expectFilter(new Date(2013, 10, 17, 0), 'd.MMMM.yy', '17.November.13');
+ expectFilter(new Date(1991, 2, 8, 0), 'd-MMMM-yyyy', '8-March-1991');
+ expectFilter(new Date(1980, 1, 5, 0), 'MMMM/d/yyyy', 'February/5/1980');
+ expectFilter(new Date(1955, 1, 5, 0), 'yyyy/MMMM/d', '1955/February/5');
+ expectFilter(new Date(2013, 7, 11, 0), 'd-MM-yy', '11-08-13');
+ expectFilter(oldDate, 'yyyy/MM/d', '0001/03/6');
+ });
+
+ it('should work correctly for `d!`', function() {
+ expectFilter(new Date(2013, 10, 17, 0), 'd!.MMMM.yy', '17.November.13');
+ expectFilter(new Date(1991, 2, 8, 0), 'd!-MMMM-yyyy', '08-March-1991');
+ expectFilter(new Date(1980, 1, 5, 0), 'MMMM/d!/yyyy', 'February/05/1980');
+ expectFilter(new Date(1955, 1, 5, 0), 'yyyy/MMMM/d!', '1955/February/05');
+ expectFilter(new Date(2013, 7, 11, 0), 'd!-MM-yy', '11-08-13');
+ expectFilter(oldDate, 'yyyy/MM/d!', '0001/03/06');
+ });
+
+ it('should work correctly for `EEEE`', function() {
+ expectFilter(new Date(2013, 10, 17, 0), 'EEEE.d.MMMM.yy', 'Sunday.17.November.13');
+ expectFilter(new Date(1991, 2, 8, 0), 'd-EEEE-MMMM-yyyy', '8-Friday-March-1991');
+ expectFilter(new Date(1980, 1, 5, 0), 'MMMM/d/yyyy/EEEE', 'February/5/1980/Tuesday');
+ expectFilter(new Date(1955, 1, 5, 0), 'yyyy/EEEE/MMMM/d', '1955/Saturday/February/5');
+ });
+
+ it('should work correctly for `EEE`', function() {
+ expectFilter(new Date(2013, 10, 17, 0), 'EEE.d.MMMM.yy', 'Sun.17.November.13');
+ expectFilter(new Date(1991, 2, 8, 0), 'd-EEE-MMMM-yyyy', '8-Fri-March-1991');
+ expectFilter(new Date(1980, 1, 5, 0), 'MMMM/d/yyyy/EEE', 'February/5/1980/Tue');
+ expectFilter(new Date(1955, 1, 5, 0), 'yyyy/EEE/MMMM/d', '1955/Sat/February/5');
+ });
+
+ it('should work correctly for `HH`', function() {
+ expectFilter(new Date(2015, 2, 22, 22), 'd.MMMM.yy.HH', '22.March.15.22');
+ expectFilter(new Date(1991, 2, 8, 11), 'd-MMMM-yyyy-HH', '8-March-1991-11');
+ expectFilter(new Date(1980, 1, 5, 0), 'MMMM/d/yyyy/HH', 'February/5/1980/00');
+ expectFilter(new Date(1955, 1, 5, 3), 'yyyy/MMMM/d HH', '1955/February/5 03');
+ expectFilter(new Date(2013, 7, 11, 23), 'd-MM-yy HH', '11-08-13 23');
+ });
+
+ it('should work correctly for `H`', function() {
+ expectFilter(new Date(2015, 2, 22, 22), 'd.MMMM.yy.H', '22.March.15.22');
+ expectFilter(new Date(1991, 2, 8, 11), 'd-MMMM-yyyy-H', '8-March-1991-11');
+ expectFilter(new Date(1980, 1, 5, 0), 'MMMM/d/yyyy/H', 'February/5/1980/0');
+ expectFilter(new Date(1955, 1, 5, 3), 'yyyy/MMMM/d H', '1955/February/5 3');
+ expectFilter(new Date(2013, 7, 11, 23), 'd-MM-yy H', '11-08-13 23');
+ });
+
+ it('should work correctly for `hh`', function() {
+ expectFilter(new Date(2015, 2, 22, 12), 'd.MMMM.yy.hh', '22.March.15.12');
+ expectFilter(new Date(1991, 2, 8, 11), 'd-MMMM-yyyy-hh', '8-March-1991-11');
+ expectFilter(new Date(1980, 1, 5, 0), 'MMMM/d/yyyy/hh', 'February/5/1980/12');
+ expectFilter(new Date(1955, 1, 5, 3), 'yyyy/MMMM/d hh', '1955/February/5 03');
+ expectFilter(new Date(2013, 7, 11, 9), 'd-MM-yy hh', '11-08-13 09');
+ });
+
+ it('should work correctly for `h`', function() {
+ expectFilter(new Date(2015, 2, 22, 12), 'd.MMMM.yy.h', '22.March.15.12');
+ expectFilter(new Date(1991, 2, 8, 11), 'd-MMMM-yyyy-h', '8-March-1991-11');
+ expectFilter(new Date(1980, 1, 5, 0), 'MMMM/d/yyyy/h', 'February/5/1980/12');
+ expectFilter(new Date(1955, 1, 5, 3), 'yyyy/MMMM/d h', '1955/February/5 3');
+ expectFilter(new Date(2013, 7, 11, 3), 'd-MM-yy h', '11-08-13 3');
+ });
+
+ it('should work correctly for `mm`', function() {
+ expectFilter(new Date(2015, 2, 22, 0, 22), 'd.MMMM.yy.mm', '22.March.15.22');
+ expectFilter(new Date(1991, 2, 8, 0, 59), 'd-MMMM-yyyy-mm', '8-March-1991-59');
+ expectFilter(new Date(1980, 1, 5, 0, 0), 'MMMM/d/yyyy/mm', 'February/5/1980/00');
+ expectFilter(new Date(1955, 1, 5, 0, 3), 'yyyy/MMMM/d mm', '1955/February/5 03');
+ expectFilter(new Date(2013, 7, 11, 0, 46), 'd-MM-yy mm', '11-08-13 46');
+ expectFilter(new Date(2015, 2, 22, 22, 33), 'd.MMMM.yy.HH:mm', '22.March.15.22:33');
+ expectFilter(new Date(2015, 2, 22, 2, 1), 'd.MMMM.yy.H:mm', '22.March.15.2:01');
+ });
+
+ it('should work correctly for `m`', function() {
+ expectFilter(new Date(2015, 2, 22, 0, 22), 'd.MMMM.yy.m', '22.March.15.22');
+ expectFilter(new Date(1991, 2, 8, 0, 59), 'd-MMMM-yyyy-m', '8-March-1991-59');
+ expectFilter(new Date(1980, 1, 5, 0, 0), 'MMMM/d/yyyy/m', 'February/5/1980/0');
+ expectFilter(new Date(1955, 1, 5, 0, 3), 'yyyy/MMMM/d m', '1955/February/5 3');
+ expectFilter(new Date(2013, 7, 11, 0, 46), 'd-MM-yy m', '11-08-13 46');
+ expectFilter(new Date(2015, 2, 22, 22, 3), 'd.MMMM.yy.HH:m', '22.March.15.22:3');
+ expectFilter(new Date(2015, 2, 22, 2, 1), 'd.MMMM.yy.H:m', '22.March.15.2:1');
+ });
+
+ it('should work correctly for `sss`', function() {
+ expectFilter(new Date(2015, 2, 22, 0, 0, 0, 123), 'd.MMMM.yy.sss', '22.March.15.123');
+ expectFilter(new Date(1991, 2, 8, 0, 0, 0, 59), 'd-MMMM-yyyy-sss', '8-March-1991-059');
+ expectFilter(new Date(1980, 1, 5, 0, 0, 0), 'MMMM/d/yyyy/sss', 'February/5/1980/000');
+ expectFilter(new Date(1955, 1, 5, 0, 0, 0, 3), 'yyyy/MMMM/d sss', '1955/February/5 003');
+ expectFilter(new Date(2013, 7, 11, 0, 0, 0, 46), 'd-MM-yy sss', '11-08-13 046');
+ expectFilter(new Date(2015, 2, 22, 22, 33, 0, 44), 'd.MMMM.yy.HH:mm:sss', '22.March.15.22:33:044');
+ expectFilter(new Date(2015, 2, 22, 0, 0, 0, 1), 'd.MMMM.yy.H:m:sss', '22.March.15.0:0:001');
+ });
+
+ it('should work correctly for `ss`', function() {
+ expectFilter(new Date(2015, 2, 22, 0, 0, 22), 'd.MMMM.yy.ss', '22.March.15.22');
+ expectFilter(new Date(1991, 2, 8, 0, 0, 59), 'd-MMMM-yyyy-ss', '8-March-1991-59');
+ expectFilter(new Date(1980, 1, 5, 0, 0, 0), 'MMMM/d/yyyy/ss', 'February/5/1980/00');
+ expectFilter(new Date(1955, 1, 5, 0, 0, 3), 'yyyy/MMMM/d ss', '1955/February/5 03');
+ expectFilter(new Date(2013, 7, 11, 0, 0, 46), 'd-MM-yy ss', '11-08-13 46');
+ expectFilter(new Date(2015, 2, 22, 22, 33, 44), 'd.MMMM.yy.HH:mm:ss', '22.March.15.22:33:44');
+ expectFilter(new Date(2015, 2, 22, 0, 0, 1), 'd.MMMM.yy.H:m:ss', '22.March.15.0:0:01');
+ });
+
+ it('should work correctly for `s`', function() {
+ expectFilter(new Date(2015, 2, 22, 0, 0, 22), 'd.MMMM.yy.s', '22.March.15.22');
+ expectFilter(new Date(1991, 2, 8, 0, 0, 59), 'd-MMMM-yyyy-s', '8-March-1991-59');
+ expectFilter(new Date(1980, 1, 5, 0, 0, 0), 'MMMM/d/yyyy/s', 'February/5/1980/0');
+ expectFilter(new Date(1955, 1, 5, 0, 0, 3), 'yyyy/MMMM/d s', '1955/February/5 3');
+ expectFilter(new Date(2013, 7, 11, 0, 0, 46), 'd-MM-yy s', '11-08-13 46');
+ expectFilter(new Date(2015, 2, 22, 22, 33, 4), 'd.MMMM.yy.HH:mm:s', '22.March.15.22:33:4');
+ expectFilter(new Date(2015, 2, 22, 22, 3, 4), 'd.MMMM.yy.HH:m:s', '22.March.15.22:3:4');
+ });
+
+ it('should work correctly for `a`', function() {
+ expectFilter(new Date(2015, 2, 22, 10), 'd.MMMM.yy.hha', '22.March.15.10AM');
+ expectFilter(new Date(2015, 2, 22, 22), 'd.MMMM.yy.hha', '22.March.15.10PM');
+ expectFilter(new Date(1991, 2, 8, 11), 'd-MMMM-yyyy-hha', '8-March-1991-11AM');
+ expectFilter(new Date(1991, 2, 8, 23), 'd-MMMM-yyyy-hha', '8-March-1991-11PM');
+ expectFilter(new Date(1980, 1, 5, 0), 'MMMM/d/yyyy/hha', 'February/5/1980/12AM');
+ expectFilter(new Date(1980, 1, 5, 12), 'MMMM/d/yyyy/hha', 'February/5/1980/12PM');
+ expectFilter(new Date(1955, 1, 5, 3), 'yyyy/MMMM/d hha', '1955/February/5 03AM');
+ expectFilter(new Date(1955, 1, 5, 15), 'yyyy/MMMM/d hha', '1955/February/5 03PM');
+ expectFilter(new Date(2013, 7, 11, 9), 'd-MM-yy hha', '11-08-13 09AM');
+ expectFilter(new Date(2013, 7, 11, 21), 'd-MM-yy hha', '11-08-13 09PM');
+ });
+
+ it('should work correctly for `ww`', function() {
+ expectFilter(new Date(2013, 10, 17, 0), 'd.MMMM.yy.ww', '17.November.13.47');
+ expectFilter(new Date(1991, 2, 8, 0), 'd-MMMM-yyyy-ww', '8-March-1991-10');
+ expectFilter(new Date(1980, 1, 5, 0), 'MMMM/d/yyyy/ww', 'February/5/1980/06');
+ expectFilter(new Date(1955, 1, 5, 0), 'yyyy/MMMM/d/ww', '1955/February/5/05');
+ expectFilter(new Date(2013, 7, 11, 0), 'd-MM-yy ww', '11-08-13 33');
+ expectFilter(oldDate, 'yyyy/MM/d ww', '0001/03/6 10');
+ });
+
+ it('should work correctly for `w`', function() {
+ expectFilter(new Date(2013, 10, 17, 0), 'd.MMMM.yy.w', '17.November.13.47');
+ expectFilter(new Date(1991, 2, 8, 0), 'd-MMMM-yyyy-w', '8-March-1991-10');
+ expectFilter(new Date(1980, 1, 5, 0), 'MMMM/d/yyyy/w', 'February/5/1980/6');
+ expectFilter(new Date(1955, 1, 5, 0), 'yyyy/MMMM/d/w', '1955/February/5/5');
+ expectFilter(new Date(2013, 7, 11, 0), 'd-MM-yy w', '11-08-13 33');
+ expectFilter(oldDate, 'yyyy/MM/d w', '0001/03/6 10');
+ });
+
+ it('should work correctly for `G`', function() {
+ expectFilter(new Date(2013, 10, 17, 0), 'd.MMMM.yy.G', '17.November.13.AD');
+ expectFilter(new Date(-1991, 2, 8, 0), 'd-MMMM-yyyy-G', '8-March-1991-BC');
+ expectFilter(new Date(1980, 1, 5, 0), 'MMMM/d/yyyy/G', 'February/5/1980/AD');
+ expectFilter(new Date(-1955, 1, 5, 0), 'yyyy/MMMM/d/G', '1955/February/5/BC');
+ expectFilter(new Date(2013, 7, 11, 0), 'd-MM-yy G', '11-08-13 AD');
+ });
+
+ it('should work correctly for `GG`', function() {
+ expectFilter(new Date(2013, 10, 17, 0), 'd.MMMM.yy.GG', '17.November.13.AD');
+ expectFilter(new Date(-1991, 2, 8, 0), 'd-MMMM-yyyy-GG', '8-March-1991-BC');
+ expectFilter(new Date(1980, 1, 5, 0), 'MMMM/d/yyyy/GG', 'February/5/1980/AD');
+ expectFilter(new Date(-1955, 1, 5, 0), 'yyyy/MMMM/d/GG', '1955/February/5/BC');
+ expectFilter(new Date(2013, 7, 11, 0), 'd-MM-yy GG', '11-08-13 AD');
+ });
+
+ it('should work correctly for `GGG`', function() {
+ expectFilter(new Date(2013, 10, 17, 0), 'd.MMMM.yy.GGG', '17.November.13.AD');
+ expectFilter(new Date(-1991, 2, 8, 0), 'd-MMMM-yyyy-GGG', '8-March-1991-BC');
+ expectFilter(new Date(1980, 1, 5, 0), 'MMMM/d/yyyy/GGG', 'February/5/1980/AD');
+ expectFilter(new Date(-1955, 1, 5, 0), 'yyyy/MMMM/d/GGG', '1955/February/5/BC');
+ expectFilter(new Date(2013, 7, 11, 0), 'd-MM-yy GGG', '11-08-13 AD');
+ });
+
+ it('should work correctly for `GGGG`', function() {
+ expectFilter(new Date(2013, 10, 17, 0), 'd.MMMM.yy.GGGG', '17.November.13.Anno Domini');
+ expectFilter(new Date(-1991, 2, 8, 0), 'd-MMMM-yyyy-GGGG', '8-March-1991-Before Christ');
+ expectFilter(new Date(1980, 1, 5, 0), 'MMMM/d/yyyy/GGGG', 'February/5/1980/Anno Domini');
+ expectFilter(new Date(-1955, 1, 5, 0), 'yyyy/MMMM/d/GGGG', '1955/February/5/Before Christ');
+ expectFilter(new Date(2013, 7, 11, 0), 'd-MM-yy GGGG', '11-08-13 Anno Domini');
+ });
+
+ it('should work correctly for literal text', function() {
+ expectFilter(new Date(2013, 10, 17, 0), 'dd.MM.yyyy foo', '17.11.2013 foo');
+ });
+ });
+
describe('with custom formats', function() {
it('should work correctly for `dd`, `MM`, `yyyy`', function() {
expectParse('17.11.2013', 'dd.MM.yyyy', new Date(2013, 10, 17, 0));
@@ -19,16 +286,48 @@ describe('date parser', function () {
expectParse('10.01/1983', 'dd.MM/yyyy', new Date(1983, 0, 10, 0));
expectParse('11-09-1980', 'MM-dd-yyyy', new Date(1980, 10, 9, 0));
expectParse('2011/02/05', 'yyyy/MM/dd', new Date(2011, 1, 5, 0));
+ expectParse('0001/03/06', 'yyyy/MM/dd', oldDate);
});
it('should work correctly for `yy`', function() {
expectParse('17.11.13', 'dd.MM.yy', new Date(2013, 10, 17, 0));
expectParse('02-05-11', 'dd-MM-yy', new Date(2011, 4, 2, 0));
- expectParse('02/05/80', 'MM/dd/yy', new Date(2080, 1, 5, 0));
+ expectParse('02/05/80', 'MM/dd/yy', new Date(1980, 1, 5, 0));
expectParse('55/02/05', 'yy/MM/dd', new Date(2055, 1, 5, 0));
expectParse('11-08-13', 'dd-MM-yy', new Date(2013, 7, 11, 0));
});
+ it('should use `68` as the pivot year for `yy`', function() {
+ expectParse('17.11.68', 'dd.MM.yy', new Date(2068, 10, 17, 0));
+ expectParse('17.11.69', 'dd.MM.yy', new Date(1969, 10, 17, 0));
+ });
+
+ it('should work correctly for `y`', function() {
+ expectParse('17.11.2013', 'dd.MM.y', new Date(2013, 10, 17, 0));
+ expectParse('31.12.2013', 'dd.MM.y', new Date(2013, 11, 31, 0));
+ expectParse('08-03-1991', 'dd-MM-y', new Date(1991, 2, 8, 0));
+ expectParse('03/05/1980', 'MM/dd/y', new Date(1980, 2, 5, 0));
+ expectParse('10.01/1983', 'dd.MM/y', new Date(1983, 0, 10, 0));
+ expectParse('11-09-1980', 'MM-dd-y', new Date(1980, 10, 9, 0));
+ expectParse('2011/02/05', 'y/MM/dd', new Date(2011, 1, 5, 0));
+ });
+
+ it('should work correctly for `MMMM`', function() {
+ expectParse('17.November.13', 'dd.MMMM.yy', new Date(2013, 10, 17, 0));
+ expectParse('05-March-1980', 'dd-MMMM-yyyy', new Date(1980, 2, 5, 0));
+ expectParse('February/05/1980', 'MMMM/dd/yyyy', new Date(1980, 1, 5, 0));
+ expectParse('1949/December/20', 'yyyy/MMMM/dd', new Date(1949, 11, 20, 0));
+ expectParse('0001/March/06', 'yyyy/MMMM/dd', oldDate);
+ });
+
+ it('should work correctly for `MMM`', function() {
+ expectParse('30.Sep.10', 'dd.MMM.yy', new Date(2010, 8, 30, 0));
+ expectParse('02-May-11', 'dd-MMM-yy', new Date(2011, 4, 2, 0));
+ expectParse('Feb/05/1980', 'MMM/dd/yyyy', new Date(1980, 1, 5, 0));
+ expectParse('1955/Feb/05', 'yyyy/MMM/dd', new Date(1955, 1, 5, 0));
+ expectParse('0001/Mar/06', 'yyyy/MMM/dd', oldDate);
+ });
+
it('should work correctly for `M`', function() {
expectParse('8/11/2013', 'M/dd/yyyy', new Date(2013, 7, 11, 0));
expectParse('07.11.05', 'dd.M.yy', new Date(2005, 10, 7, 0));
@@ -38,18 +337,22 @@ describe('date parser', function () {
expectParse('02-5-11', 'dd-M-yy', new Date(2011, 4, 2, 0));
});
- it('should work correctly for `MMM`', function() {
- expectParse('30.Sep.10', 'dd.MMM.yy', new Date(2010, 8, 30, 0));
- expectParse('02-May-11', 'dd-MMM-yy', new Date(2011, 4, 2, 0));
- expectParse('Feb/05/1980', 'MMM/dd/yyyy', new Date(1980, 1, 5, 0));
- expectParse('1955/Feb/05', 'yyyy/MMM/dd', new Date(1955, 1, 5, 0));
- });
+ it('should work correctly for `M!`', function() {
+ expectParse('8/11/2013', 'M!/dd/yyyy', new Date(2013, 7, 11, 0));
+ expectParse('07.11.05', 'dd.M!.yy', new Date(2005, 10, 7, 0));
+ expectParse('02-5-11', 'dd-M!-yy', new Date(2011, 4, 2, 0));
+ expectParse('2/05/1980', 'M!/dd/yyyy', new Date(1980, 1, 5, 0));
+ expectParse('1955/2/05', 'yyyy/M!/dd', new Date(1955, 1, 5, 0));
+ expectParse('02-5-11', 'dd-M!-yy', new Date(2011, 4, 2, 0));
+ expectParse('0001/3/06', 'yyyy/M!/dd', oldDate);
- it('should work correctly for `MMMM`', function() {
- expectParse('17.November.13', 'dd.MMMM.yy', new Date(2013, 10, 17, 0));
- expectParse('05-March-1980', 'dd-MMMM-yyyy', new Date(1980, 2, 5, 0));
- expectParse('February/05/1980', 'MMMM/dd/yyyy', new Date(1980, 1, 5, 0));
- expectParse('1949/December/20', 'yyyy/MMMM/dd', new Date(1949, 11, 20, 0));
+ expectParse('08/11/2013', 'M!/dd/yyyy', new Date(2013, 7, 11, 0));
+ expectParse('07.11.05', 'dd.M!.yy', new Date(2005, 10, 7, 0));
+ expectParse('02-05-11', 'dd-M!-yy', new Date(2011, 4, 2, 0));
+ expectParse('02/05/1980', 'M!/dd/yyyy', new Date(1980, 1, 5, 0));
+ expectParse('1955/02/05', 'yyyy/M!/dd', new Date(1955, 1, 5, 0));
+ expectParse('02-05-11', 'dd-M!-yy', new Date(2011, 4, 2, 0));
+ expectParse('0001/03/06', 'yyyy/M!/dd', oldDate);
});
it('should work correctly for `d`', function() {
@@ -58,6 +361,37 @@ describe('date parser', function () {
expectParse('February/5/1980', 'MMMM/d/yyyy', new Date(1980, 1, 5, 0));
expectParse('1955/February/5', 'yyyy/MMMM/d', new Date(1955, 1, 5, 0));
expectParse('11-08-13', 'd-MM-yy', new Date(2013, 7, 11, 0));
+ expectParse('0001/03/6', 'yyyy/MM/d', oldDate);
+ });
+
+ it('should work correctly for `d!`', function() {
+ expectParse('17.November.13', 'd!.MMMM.yy', new Date(2013, 10, 17, 0));
+ expectParse('8-March-1991', 'd!-MMMM-yyyy', new Date(1991, 2, 8, 0));
+ expectParse('February/5/1980', 'MMMM/d!/yyyy', new Date(1980, 1, 5, 0));
+ expectParse('1955/February/5', 'yyyy/MMMM/d!', new Date(1955, 1, 5, 0));
+ expectParse('11-08-13', 'd!-MM-yy', new Date(2013, 7, 11, 0));
+ expectParse('0001/03/6', 'yyyy/MM/d!', oldDate);
+
+ expectParse('17.November.13', 'd!.MMMM.yy', new Date(2013, 10, 17, 0));
+ expectParse('08-March-1991', 'd!-MMMM-yyyy', new Date(1991, 2, 8, 0));
+ expectParse('February/05/1980', 'MMMM/d!/yyyy', new Date(1980, 1, 5, 0));
+ expectParse('1955/February/05', 'yyyy/MMMM/d!', new Date(1955, 1, 5, 0));
+ expectParse('11-08-13', 'd!-MM-yy', new Date(2013, 7, 11, 0));
+ expectParse('0001/03/06', 'yyyy/MM/d!', oldDate);
+ });
+
+ it('should work correctly for `EEEE`', function() {
+ expectParse('Sunday.17.November.13', 'EEEE.d.MMMM.yy', new Date(2013, 10, 17, 0));
+ expectParse('8-Friday-March-1991', 'd-EEEE-MMMM-yyyy', new Date(1991, 2, 8, 0));
+ expectParse('February/5/1980/Tuesday', 'MMMM/d/yyyy/EEEE', new Date(1980, 1, 5, 0));
+ expectParse('1955/Saturday/February/5', 'yyyy/EEEE/MMMM/d', new Date(1955, 1, 5, 0));
+ });
+
+ it('should work correctly for `EEE`', function() {
+ expectParse('Sun.17.November.13', 'EEE.d.MMMM.yy', new Date(2013, 10, 17, 0));
+ expectParse('8-Fri-March-1991', 'd-EEE-MMMM-yyyy', new Date(1991, 2, 8, 0));
+ expectParse('February/5/1980/Tue', 'MMMM/d/yyyy/EEE', new Date(1980, 1, 5, 0));
+ expectParse('1955/Sat/February/5', 'yyyy/EEE/MMMM/d', new Date(1955, 1, 5, 0));
});
it('should work correctly for `HH`', function() {
@@ -76,6 +410,24 @@ describe('date parser', function () {
expectParse('11-08-13 23', 'd-MM-yy H', new Date(2013, 7, 11, 23));
});
+ it('should work correctly for `hh`', function() {
+ expectParse('22.March.15.22', 'd.MMMM.yy.hh', undefined);
+ expectParse('22.March.15.12', 'd.MMMM.yy.hh', new Date(2015, 2, 22, 12));
+ expectParse('8-March-1991-11', 'd-MMMM-yyyy-hh', new Date(1991, 2, 8, 11));
+ expectParse('February/5/1980/00', 'MMMM/d/yyyy/hh', new Date(1980, 1, 5, 0));
+ expectParse('1955/February/5 03', 'yyyy/MMMM/d hh', new Date(1955, 1, 5, 3));
+ expectParse('11-08-13 23', 'd-MM-yy hh', undefined);
+ expectParse('11-08-13 09', 'd-MM-yy hh', new Date(2013, 7, 11, 9));
+ });
+
+ it('should work correctly for `h`', function() {
+ expectParse('22.March.15.12', 'd.MMMM.yy.h', new Date(2015, 2, 22, 12));
+ expectParse('8-March-1991-11', 'd-MMMM-yyyy-h', new Date(1991, 2, 8, 11));
+ expectParse('February/5/1980/0', 'MMMM/d/yyyy/h', new Date(1980, 1, 5, 0));
+ expectParse('1955/February/5 3', 'yyyy/MMMM/d h', new Date(1955, 1, 5, 3));
+ expectParse('11-08-13 3', 'd-MM-yy h', new Date(2013, 7, 11, 3));
+ });
+
it('should work correctly for `mm`', function() {
expectParse('22.March.15.22', 'd.MMMM.yy.mm', new Date(2015, 2, 22, 0, 22));
expectParse('8-March-1991-59', 'd-MMMM-yyyy-mm', new Date(1991, 2, 8, 0, 59));
@@ -125,6 +477,83 @@ describe('date parser', function () {
expectParse('22.March.15.22:33:4', 'd.MMMM.yy.HH:mm:s', new Date(2015, 2, 22, 22, 33, 4));
expectParse('22.March.15.22:3:4', 'd.MMMM.yy.HH:m:s', new Date(2015, 2, 22, 22, 3, 4));
});
+
+ it('should work correctly for `a`', function() {
+ expectParse('22.March.15.10AM', 'd.MMMM.yy.hha', new Date(2015, 2, 22, 10));
+ expectParse('22.March.15.10PM', 'd.MMMM.yy.hha', new Date(2015, 2, 22, 22));
+ expectParse('8-March-1991-11AM', 'd-MMMM-yyyy-hha', new Date(1991, 2, 8, 11));
+ expectParse('8-March-1991-11PM', 'd-MMMM-yyyy-hha', new Date(1991, 2, 8, 23));
+ expectParse('February/5/1980/12AM', 'MMMM/d/yyyy/hha', new Date(1980, 1, 5, 0));
+ expectParse('February/5/1980/12PM', 'MMMM/d/yyyy/hha', new Date(1980, 1, 5, 12));
+ expectParse('1955/February/5 03AM', 'yyyy/MMMM/d hha', new Date(1955, 1, 5, 3));
+ expectParse('1955/February/5 03PM', 'yyyy/MMMM/d hha', new Date(1955, 1, 5, 15));
+ expectParse('11-08-13 09AM', 'd-MM-yy hha', new Date(2013, 7, 11, 9));
+ expectParse('11-08-13 09PM', 'd-MM-yy hha', new Date(2013, 7, 11, 21));
+ });
+
+ it('should work correctly for `Z`', function() {
+ expectParse('22.March.15 -0700', 'd.MMMM.yy Z', new Date(2015, 2, 21, 17, 0, 0));
+ expectParse('8-March-1991 +0800', 'd-MMMM-yyyy Z', new Date(1991, 2, 8, 8, 0, 0));
+ expectParse('February/5/1980 -0200', 'MMMM/d/yyyy Z', new Date(1980, 1, 4, 22, 0, 0));
+ expectParse('1955/February/5 +0400', 'yyyy/MMMM/d Z', new Date(1955, 1, 5, 4, 0, 0));
+ expectParse('11-08-13 -1234', 'd-MM-yy Z', new Date(2013, 7, 10, 11, 26, 0));
+ expectParse('22.March.15.22:33:4 -1200', 'd.MMMM.yy.HH:mm:s Z', new Date(2015, 2, 22, 10, 33, 4));
+ expectParse('22.March.15.22:3:4 +1500', 'd.MMMM.yy.HH:m:s Z', new Date(2015, 2, 23, 13, 3, 4));
+ });
+
+ it('should work correctly for `ww`', function() {
+ expectParse('17.November.13.45', 'd.MMMM.yy.ww', new Date(2013, 10, 17, 0));
+ expectParse('8-March-1991-09', 'd-MMMM-yyyy-ww', new Date(1991, 2, 8, 0));
+ expectParse('February/5/1980/05', 'MMMM/d/yyyy/ww', new Date(1980, 1, 5, 0));
+ expectParse('1955/February/5/04', 'yyyy/MMMM/d/ww', new Date(1955, 1, 5, 0));
+ expectParse('11-08-13 44', 'd-MM-yy ww', new Date(2013, 7, 11, 0));
+ expectParse('0001/03/6 10', 'yyyy/MM/d ww', oldDate);
+ });
+
+ it('should work correctly for `w`', function() {
+ expectParse('17.November.13.45', 'd.MMMM.yy.w', new Date(2013, 10, 17, 0));
+ expectParse('8-March-1991-9', 'd-MMMM-yyyy-w', new Date(1991, 2, 8, 0));
+ expectParse('February/5/1980/5', 'MMMM/d/yyyy/w', new Date(1980, 1, 5, 0));
+ expectParse('1955/February/5/4', 'yyyy/MMMM/d/w', new Date(1955, 1, 5, 0));
+ expectParse('11-08-13 44', 'd-MM-yy w', new Date(2013, 7, 11, 0));
+ expectParse('0001/03/6 10', 'yyyy/MM/d w', oldDate);
+ });
+
+ it('should work correctly for `G`', function() {
+ expectParse('17.November.13.AD', 'd.MMMM.yy.G', new Date(2013, 10, 17, 0));
+ expectParse('8-March-1991-BC', 'd-MMMM-yyyy-G', new Date(1991, 2, 8, 0));
+ expectParse('February/5/1980/AD', 'MMMM/d/yyyy/G', new Date(1980, 1, 5, 0));
+ expectParse('1955/February/5/BC', 'yyyy/MMMM/d/G', new Date(1955, 1, 5, 0));
+ expectParse('11-08-13 AD', 'd-MM-yy G', new Date(2013, 7, 11, 0));
+ expectParse('0001/03/6 BC', 'yyyy/MM/d G', oldDate);
+ });
+
+ it('should work correctly for `GG`', function() {
+ expectParse('17.November.13.AD', 'd.MMMM.yy.GG', new Date(2013, 10, 17, 0));
+ expectParse('8-March-1991-BC', 'd-MMMM-yyyy-GG', new Date(1991, 2, 8, 0));
+ expectParse('February/5/1980/AD', 'MMMM/d/yyyy/GG', new Date(1980, 1, 5, 0));
+ expectParse('1955/February/5/BC', 'yyyy/MMMM/d/GG', new Date(1955, 1, 5, 0));
+ expectParse('11-08-13 AD', 'd-MM-yy GG', new Date(2013, 7, 11, 0));
+ expectParse('0001/03/6 BC', 'yyyy/MM/d GG', oldDate);
+ });
+
+ it('should work correctly for `GGG`', function() {
+ expectParse('17.November.13.AD', 'd.MMMM.yy.GGG', new Date(2013, 10, 17, 0));
+ expectParse('8-March-1991-BC', 'd-MMMM-yyyy-GGG', new Date(1991, 2, 8, 0));
+ expectParse('February/5/1980/AD', 'MMMM/d/yyyy/GGG', new Date(1980, 1, 5, 0));
+ expectParse('1955/February/5/BC', 'yyyy/MMMM/d/GGG', new Date(1955, 1, 5, 0));
+ expectParse('11-08-13 AD', 'd-MM-yy GGG', new Date(2013, 7, 11, 0));
+ expectParse('0001/03/6 BC', 'yyyy/MM/d GGG', oldDate);
+ });
+
+ it('should work correctly for `GGGG`', function() {
+ expectParse('17.November.13.Anno Domini', 'd.MMMM.yy.GGGG', new Date(2013, 10, 17, 0));
+ expectParse('8-March-1991-Before Christ', 'd-MMMM-yyyy-GGGG', new Date(1991, 2, 8, 0));
+ expectParse('February/5/1980/Anno Domini', 'MMMM/d/yyyy/GGGG', new Date(1980, 1, 5, 0));
+ expectParse('1955/February/5/Before Christ', 'yyyy/MMMM/d/GGGG', new Date(1955, 1, 5, 0));
+ expectParse('11-08-13 Anno Domini', 'd-MM-yy GGGG', new Date(2013, 7, 11, 0));
+ expectParse('0001/03/6 Before Christ', 'yyyy/MM/d GGGG', oldDate);
+ });
});
describe('with predefined formats', function() {
@@ -145,13 +574,59 @@ describe('date parser', function () {
});
});
+ describe('with value literals', function() {
+ describe('filter', function() {
+ it('should work with multiple literals', function() {
+ expect(dateParser.filter(new Date(2013, 0, 29), 'd \'de\' MMMM \'de\' y')).toEqual('29 de January de 2013');
+ });
+
+ it('should work with escaped single quote', function() {
+ expect(dateParser.filter(new Date(2015, 2, 22, 12), 'd.MMMM.yy h \'o\'\'clock\'')).toEqual('22.March.15 12 o\'clock');
+ });
+
+ it('should work with only a single quote', function() {
+ expect(dateParser.filter(new Date(2015, 2, 22), 'd.MMMM.yy \'\'\'')).toEqual('22.March.15 \'');
+ });
+
+ it('should work with trailing literal', function() {
+ expect(dateParser.filter(new Date(2013, 0, 1), '\'year\' y')).toEqual('year 2013');
+ });
+
+ it('should work without whitespace', function() {
+ expect(dateParser.filter(new Date(2013, 0, 1), '\'year:\'y')).toEqual('year:2013');
+ });
+ });
+
+ describe('parse', function() {
+ it('should work with multiple literals', function() {
+ expect(dateParser.parse('29 de January de 2013', 'd \'de\' MMMM \'de\' y')).toEqual(new Date(2013, 0, 29));
+ });
+
+ it('should work with escaped single quote', function() {
+ expect(dateParser.parse('22.March.15 12 o\'clock', 'd.MMMM.yy h \'o\'\'clock\'')).toEqual(new Date(2015, 2, 22, 12));
+ });
+
+ it('should work with only a single quote', function() {
+ expect(dateParser.parse('22.March.15 \'', 'd.MMMM.yy \'\'\'')).toEqual(new Date(2015, 2, 22));
+ });
+
+ it('should work with trailing literal', function() {
+ expect(dateParser.parse('year 2013', '\'year\' y')).toEqual(new Date(2013, 0, 1));
+ });
+
+ it('should work without whitespace', function() {
+ expect(dateParser.parse('year:2013', '\'year:\'y')).toEqual(new Date(2013, 0, 1));
+ });
+ });
+ });
+
describe('with edge case', function() {
it('should not work for invalid number of days in February', function() {
- expect(dateParser.parse('29.02.2013', 'dd.MM.yyyy')).toBeUndefined();
+ expectParse('29.02.2013', 'dd.MM.yyyy', undefined);
});
it('should not work for 0 number of days', function() {
- expect(dateParser.parse('00.02.2013', 'dd.MM.yyyy')).toBeUndefined();
+ expectParse('00.02.2013', 'dd.MM.yyyy', undefined);
});
it('should work for 29 days in February for leap years', function() {
@@ -159,18 +634,185 @@ describe('date parser', function () {
});
it('should not work for 31 days for some months', function() {
- expect(dateParser.parse('31-04-2013', 'dd-MM-yyyy')).toBeUndefined();
- expect(dateParser.parse('November 31, 2013', 'MMMM d, yyyy')).toBeUndefined();
+ expectParse('31-04-2013', 'dd-MM-yyyy', undefined);
+ expectParse('November 31, 2013', 'MMMM d, yyyy', undefined);
+ });
+ });
+
+ describe('base date', function() {
+ var baseDate;
+
+ beforeEach(function() {
+ baseDate = new Date(2010, 10, 10);
});
+
+ it('should pre-initialize our date with a base date', function() {
+ expect(expectBaseParse('2015', 'yyyy', baseDate, new Date(2015, 10, 10)));
+ expect(expectBaseParse('1', 'M', baseDate, new Date(2010, 0, 10)));
+ expect(expectBaseParse('1', 'd', baseDate, new Date(2010, 10, 1)));
+ });
+
+ it('should ignore the base date when it is an invalid date', inject(function($log) {
+ spyOn($log, 'warn');
+ expect(expectBaseParse('30-12', 'dd-MM', new Date('foo'), new Date(1900, 11, 30)));
+ expect(expectBaseParse('30-2015', 'dd-yyyy', 'I am a cat', new Date(2015, 0, 30)));
+ expect($log.warn).toHaveBeenCalledWith('dateparser:', 'baseDate is not a valid date');
+ }));
});
it('should not parse non-string inputs', function() {
- expect(dateParser.parse(123456, 'dd.MM.yyyy')).toBe(123456);
+ expectParse(123456, 'dd.MM.yyyy', 123456);
var date = new Date();
- expect(dateParser.parse(date, 'dd.MM.yyyy')).toBe(date);
+ expectParse(date, 'dd.MM.yyyy', date);
});
it('should not parse if no format is specified', function() {
- expect(dateParser.parse('21.08.1951', '')).toBe('21.08.1951');
+ expectParse('21.08.1951', '', '21.08.1951');
+ });
+
+ it('should reinitialize when locale changes', inject(function($locale) {
+ spyOn(dateParser, 'init').and.callThrough();
+ expect($locale.id).toBe('en-us');
+
+ $locale.id = 'en-uk';
+
+ dateParser.parse('22.March.15.22', 'd.MMMM.yy.s');
+
+ expect(dateParser.init).toHaveBeenCalled();
+ }));
+
+ describe('timezone functions', function() {
+ describe('toTimezone', function() {
+ it('adjusts date: PST - EST', function() {
+ var date = new Date('2008-01-01T00:00:00.000Z');
+ var toWestDate = dateParser.toTimezone(date, 'PST');
+ var toEastDate = dateParser.toTimezone(date, 'EST');
+ expect(toWestDate.getTime() - toEastDate.getTime()).toEqual(1000 * 60 * 60 * 3);
+ });
+
+ it('adjusts date: GMT-0500 - GMT+0500', function() {
+ var date = new Date('2008-01-01T00:00:00.000Z');
+ var toWestDate = dateParser.toTimezone(date, 'GMT-0500');
+ var toEastDate = dateParser.toTimezone(date, 'GMT+0500');
+ expect(toWestDate.getTime() - toEastDate.getTime()).toEqual(1000 * 60 * 60 * 10);
+ });
+
+ it('adjusts date: -600 - +600', function() {
+ var date = new Date('2008-01-01T00:00:00.000Z');
+ var toWestDate = dateParser.toTimezone(date, '-600');
+ var toEastDate = dateParser.toTimezone(date, '+600');
+ expect(toWestDate.getTime() - toEastDate.getTime()).toEqual(1000 * 60 * 60 * 12);
+ });
+
+ it('tolerates null date', function() {
+ var date = null;
+ var toNullDate = dateParser.toTimezone(date, '-600');
+ expect(toNullDate).toEqual(date);
+ });
+
+ it('tolerates null timezone', function() {
+ var date = new Date('2008-01-01T00:00:00.000Z');
+ var toNullTimezoneDate = dateParser.toTimezone(date, null);
+ expect(toNullTimezoneDate).toEqual(date);
+ });
+ });
+
+ describe('fromTimezone', function() {
+ it('adjusts date: PST - EST', function() {
+ var date = new Date('2008-01-01T00:00:00.000Z');
+ var fromWestDate = dateParser.fromTimezone(date, 'PST');
+ var fromEastDate = dateParser.fromTimezone(date, 'EST');
+ expect(fromWestDate.getTime() - fromEastDate.getTime()).toEqual(1000 * 60 * 60 * -3);
+ });
+
+ it('adjusts date: GMT-0500 - GMT+0500', function() {
+ var date = new Date('2008-01-01T00:00:00.000Z');
+ var fromWestDate = dateParser.fromTimezone(date, 'GMT-0500');
+ var fromEastDate = dateParser.fromTimezone(date, 'GMT+0500');
+ expect(fromWestDate.getTime() - fromEastDate.getTime()).toEqual(1000 * 60 * 60 * -10);
+ });
+
+ it('adjusts date: -600 - +600', function() {
+ var date = new Date('2008-01-01T00:00:00.000Z');
+ var fromWestDate = dateParser.fromTimezone(date, '-600');
+ var fromEastDate = dateParser.fromTimezone(date, '+600');
+ expect(fromWestDate.getTime() - fromEastDate.getTime()).toEqual(1000 * 60 * 60 * -12);
+ });
+
+ it('tolerates null date', function() {
+ var date = null;
+ var toNullDate = dateParser.fromTimezone(date, '-600');
+ expect(toNullDate).toEqual(date);
+ });
+
+ it('tolerates null timezone', function() {
+ var date = new Date('2008-01-01T00:00:00.000Z');
+ var toNullTimezoneDate = dateParser.fromTimezone(date, null);
+ expect(toNullTimezoneDate).toEqual(date);
+ });
+ });
+
+ describe('timezoneToOffset', function() {
+ it('calculates minutes off from current timezone', function() {
+ var offsetMinutesUtc = dateParser.timezoneToOffset('UTC');
+ var offsetMinutesUtcPlus1 = dateParser.timezoneToOffset('GMT+0100');
+ expect(offsetMinutesUtc - offsetMinutesUtcPlus1).toEqual(60);
+ });
+ });
+
+ describe('addDateMinutes', function() {
+ it('adds minutes to a date', function() {
+ var date = new Date('2008-01-01T00:00:00.000Z');
+ var oneHourMore = dateParser.addDateMinutes(date, 60);
+ expect(oneHourMore).toEqual(new Date('2008-01-01T01:00:00.000Z'));
+ });
+ });
+
+ describe('convertTimezoneToLocal', function() {
+ it('adjusts date: PST - EST', function() {
+ var date = new Date('2008-01-01T00:00:00.000Z');
+ var toWestDate = dateParser.convertTimezoneToLocal(date, 'PST');
+ var toEastDate = dateParser.convertTimezoneToLocal(date, 'EST');
+ expect(toWestDate.getTime() - toEastDate.getTime()).toEqual(1000 * 60 * 60 * 3);
+ });
+
+ it('adjusts date: GMT-0500 - GMT+0500', function() {
+ var date = new Date('2008-01-01T00:00:00.000Z');
+ var toWestDate = dateParser.convertTimezoneToLocal(date, 'GMT-0500');
+ var toEastDate = dateParser.convertTimezoneToLocal(date, 'GMT+0500');
+ expect(toWestDate.getTime() - toEastDate.getTime()).toEqual(1000 * 60 * 60 * 10);
+ });
+
+ it('adjusts date: -600 - +600', function() {
+ var date = new Date('2008-01-01T00:00:00.000Z');
+ var toWestDate = dateParser.convertTimezoneToLocal(date, '-600');
+ var toEastDate = dateParser.convertTimezoneToLocal(date, '+600');
+ expect(toWestDate.getTime() - toEastDate.getTime()).toEqual(1000 * 60 * 60 * 12);
+ });
+ });
+ });
+
+ describe('overrideParser', function() {
+ var twoDigitYearParser = function (value) {
+ this.year = +value + (+value > 30 ? 1900 : 2000);
+ };
+
+ it('should get the current parser', function() {
+ expect(dateParser.getParser('yy')).toBeTruthy();
+ });
+
+ it('should override the parser', function() {
+ dateParser.overrideParser('yy', twoDigitYearParser);
+ expect(dateParser.parse('68', 'yy').getFullYear()).toEqual(1968);
+ expect(dateParser.parse('67', 'yy').getFullYear()).toEqual(1967);
+ expect(dateParser.parse('31', 'yy').getFullYear()).toEqual(1931);
+ expect(dateParser.parse('30', 'yy').getFullYear()).toEqual(2030);
+ });
+
+ it('should clear cached parsers', function() {
+ expect(dateParser.parse('68', 'yy').getFullYear()).toEqual(2068);
+ dateParser.overrideParser('yy', twoDigitYearParser);
+ expect(dateParser.parse('68', 'yy').getFullYear()).toEqual(1968);
+ });
});
});
diff --git a/src/datepicker/datepicker.css b/src/datepicker/datepicker.css
new file mode 100644
index 0000000000..c49e180968
--- /dev/null
+++ b/src/datepicker/datepicker.css
@@ -0,0 +1,11 @@
+.uib-datepicker .uib-title {
+ width: 100%;
+}
+
+.uib-day button, .uib-month button, .uib-year button {
+ min-width: 100%;
+}
+
+.uib-left, .uib-right {
+ width: 100%
+}
diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js
index a98b48dc7e..fd4e263660 100644
--- a/src/datepicker/datepicker.js
+++ b/src/datepicker/datepicker.js
@@ -1,62 +1,154 @@
-angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootstrap.position'])
+angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootstrap.isClass'])
-.constant('datepickerConfig', {
+.value('$datepickerSuppressError', false)
+
+.value('$datepickerLiteralWarning', true)
+
+.constant('uibDatepickerConfig', {
+ datepickerMode: 'day',
formatDay: 'dd',
formatMonth: 'MMMM',
formatYear: 'yyyy',
formatDayHeader: 'EEE',
formatDayTitle: 'MMMM yyyy',
formatMonthTitle: 'yyyy',
- datepickerMode: 'day',
- minMode: 'day',
+ maxDate: null,
maxMode: 'year',
- showWeeks: true,
- startingDay: 0,
- yearRange: 20,
minDate: null,
- maxDate: null,
- shortcutPropagation: false
+ minMode: 'day',
+ monthColumns: 3,
+ ngModelOptions: {},
+ shortcutPropagation: false,
+ showWeeks: true,
+ yearColumns: 5,
+ yearRows: 4
})
-.controller('DatepickerController', ['$scope', '$attrs', '$parse', '$interpolate', '$timeout', '$log', 'dateFilter', 'datepickerConfig', function($scope, $attrs, $parse, $interpolate, $timeout, $log, dateFilter, datepickerConfig) {
+.controller('UibDatepickerController', ['$scope', '$element', '$attrs', '$parse', '$interpolate', '$locale', '$log', 'dateFilter', 'uibDatepickerConfig', '$datepickerLiteralWarning', '$datepickerSuppressError', 'uibDateParser',
+ function($scope, $element, $attrs, $parse, $interpolate, $locale, $log, dateFilter, datepickerConfig, $datepickerLiteralWarning, $datepickerSuppressError, dateParser) {
var self = this,
- ngModelCtrl = { $setViewValue: angular.noop }; // nullModelCtrl;
+ ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl;
+ ngModelOptions = {},
+ watchListeners = [];
+
+ $element.addClass('uib-datepicker');
+ $attrs.$set('role', 'application');
+
+ if (!$scope.datepickerOptions) {
+ $scope.datepickerOptions = {};
+ }
// Modes chain
this.modes = ['day', 'month', 'year'];
- // Configuration attributes
- angular.forEach(['formatDay', 'formatMonth', 'formatYear', 'formatDayHeader', 'formatDayTitle', 'formatMonthTitle',
- 'minMode', 'maxMode', 'showWeeks', 'startingDay', 'yearRange', 'shortcutPropagation'], function( key, index ) {
- self[key] = angular.isDefined($attrs[key]) ? (index < 8 ? $interpolate($attrs[key])($scope.$parent) : $scope.$parent.$eval($attrs[key])) : datepickerConfig[key];
- });
+ [
+ 'customClass',
+ 'dateDisabled',
+ 'datepickerMode',
+ 'formatDay',
+ 'formatDayHeader',
+ 'formatDayTitle',
+ 'formatMonth',
+ 'formatMonthTitle',
+ 'formatYear',
+ 'maxDate',
+ 'maxMode',
+ 'minDate',
+ 'minMode',
+ 'monthColumns',
+ 'showWeeks',
+ 'shortcutPropagation',
+ 'startingDay',
+ 'yearColumns',
+ 'yearRows'
+ ].forEach(function(key) {
+ switch (key) {
+ case 'customClass':
+ case 'dateDisabled':
+ $scope[key] = $scope.datepickerOptions[key] || angular.noop;
+ break;
+ case 'datepickerMode':
+ $scope.datepickerMode = angular.isDefined($scope.datepickerOptions.datepickerMode) ?
+ $scope.datepickerOptions.datepickerMode : datepickerConfig.datepickerMode;
+ break;
+ case 'formatDay':
+ case 'formatDayHeader':
+ case 'formatDayTitle':
+ case 'formatMonth':
+ case 'formatMonthTitle':
+ case 'formatYear':
+ self[key] = angular.isDefined($scope.datepickerOptions[key]) ?
+ $interpolate($scope.datepickerOptions[key])($scope.$parent) :
+ datepickerConfig[key];
+ break;
+ case 'monthColumns':
+ case 'showWeeks':
+ case 'shortcutPropagation':
+ case 'yearColumns':
+ case 'yearRows':
+ self[key] = angular.isDefined($scope.datepickerOptions[key]) ?
+ $scope.datepickerOptions[key] : datepickerConfig[key];
+ break;
+ case 'startingDay':
+ if (angular.isDefined($scope.datepickerOptions.startingDay)) {
+ self.startingDay = $scope.datepickerOptions.startingDay;
+ } else if (angular.isNumber(datepickerConfig.startingDay)) {
+ self.startingDay = datepickerConfig.startingDay;
+ } else {
+ self.startingDay = ($locale.DATETIME_FORMATS.FIRSTDAYOFWEEK + 8) % 7;
+ }
- // Watchable date attributes
- angular.forEach(['minDate', 'maxDate'], function( key ) {
- if ( $attrs[key] ) {
- $scope.$parent.$watch($parse($attrs[key]), function(value) {
- self[key] = value ? new Date(value) : null;
- self.refreshView();
- });
- } else {
- self[key] = datepickerConfig[key] ? new Date(datepickerConfig[key]) : null;
+ break;
+ case 'maxDate':
+ case 'minDate':
+ $scope.$watch('datepickerOptions.' + key, function(value) {
+ if (value) {
+ if (angular.isDate(value)) {
+ self[key] = dateParser.fromTimezone(new Date(value), ngModelOptions.getOption('timezone'));
+ } else {
+ if ($datepickerLiteralWarning) {
+ $log.warn('Literal date support has been deprecated, please switch to date object usage');
+ }
+
+ self[key] = new Date(dateFilter(value, 'medium'));
+ }
+ } else {
+ self[key] = datepickerConfig[key] ?
+ dateParser.fromTimezone(new Date(datepickerConfig[key]), ngModelOptions.getOption('timezone')) :
+ null;
+ }
+
+ self.refreshView();
+ });
+
+ break;
+ case 'maxMode':
+ case 'minMode':
+ if ($scope.datepickerOptions[key]) {
+ $scope.$watch(function() { return $scope.datepickerOptions[key]; }, function(value) {
+ self[key] = $scope[key] = angular.isDefined(value) ? value : $scope.datepickerOptions[key];
+ if (key === 'minMode' && self.modes.indexOf($scope.datepickerOptions.datepickerMode) < self.modes.indexOf(self[key]) ||
+ key === 'maxMode' && self.modes.indexOf($scope.datepickerOptions.datepickerMode) > self.modes.indexOf(self[key])) {
+ $scope.datepickerMode = self[key];
+ $scope.datepickerOptions.datepickerMode = self[key];
+ }
+ });
+ } else {
+ self[key] = $scope[key] = datepickerConfig[key] || null;
+ }
+
+ break;
}
});
- $scope.datepickerMode = $scope.datepickerMode || datepickerConfig.datepickerMode;
- $scope.maxMode = self.maxMode;
$scope.uniqueId = 'datepicker-' + $scope.$id + '-' + Math.floor(Math.random() * 10000);
- if(angular.isDefined($attrs.initDate)) {
- this.activeDate = $scope.$parent.$eval($attrs.initDate) || new Date();
- $scope.$parent.$watch($attrs.initDate, function(initDate){
- if(initDate && (ngModelCtrl.$isEmpty(ngModelCtrl.$modelValue) || ngModelCtrl.$invalid)){
- self.activeDate = initDate;
- self.refreshView();
- }
- });
- } else {
- this.activeDate = new Date();
+ $scope.disabled = angular.isDefined($attrs.disabled) || false;
+ if (angular.isDefined($attrs.ngDisabled)) {
+ watchListeners.push($scope.$parent.$watch($attrs.ngDisabled, function(disabled) {
+ $scope.disabled = disabled;
+ self.refreshView();
+ }));
}
$scope.isActive = function(dateObject) {
@@ -67,8 +159,26 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
return false;
};
- this.init = function( ngModelCtrl_ ) {
+ this.init = function(ngModelCtrl_) {
ngModelCtrl = ngModelCtrl_;
+ ngModelOptions = extractOptions(ngModelCtrl);
+
+ if ($scope.datepickerOptions.initDate) {
+ self.activeDate = dateParser.fromTimezone($scope.datepickerOptions.initDate, ngModelOptions.getOption('timezone')) || new Date();
+ $scope.$watch('datepickerOptions.initDate', function(initDate) {
+ if (initDate && (ngModelCtrl.$isEmpty(ngModelCtrl.$modelValue) || ngModelCtrl.$invalid)) {
+ self.activeDate = dateParser.fromTimezone(initDate, ngModelOptions.getOption('timezone'));
+ self.refreshView();
+ }
+ });
+ } else {
+ self.activeDate = new Date();
+ }
+
+ var date = ngModelCtrl.$modelValue ? new Date(ngModelCtrl.$modelValue) : new Date();
+ this.activeDate = !isNaN(date) ?
+ dateParser.fromTimezone(date, ngModelOptions.getOption('timezone')) :
+ dateParser.fromTimezone(new Date(), ngModelOptions.getOption('timezone'));
ngModelCtrl.$render = function() {
self.render();
@@ -76,48 +186,72 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
};
this.render = function() {
- if ( ngModelCtrl.$viewValue ) {
- var date = new Date( ngModelCtrl.$viewValue ),
+ if (ngModelCtrl.$viewValue) {
+ var date = new Date(ngModelCtrl.$viewValue),
isValid = !isNaN(date);
- if ( isValid ) {
- this.activeDate = date;
- } else {
- $log.error('Datepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.');
+ if (isValid) {
+ this.activeDate = dateParser.fromTimezone(date, ngModelOptions.getOption('timezone'));
+ } else if (!$datepickerSuppressError) {
+ $log.error('Datepicker directive: "ng-model" value must be a Date object');
}
- ngModelCtrl.$setValidity('date', isValid);
}
this.refreshView();
};
this.refreshView = function() {
- if ( this.element ) {
+ if (this.element) {
+ $scope.selectedDt = null;
this._refreshView();
+ if ($scope.activeDt) {
+ $scope.activeDateId = $scope.activeDt.uid;
+ }
var date = ngModelCtrl.$viewValue ? new Date(ngModelCtrl.$viewValue) : null;
- ngModelCtrl.$setValidity('date-disabled', !date || (this.element && !this.isDisabled(date)));
+ date = dateParser.fromTimezone(date, ngModelOptions.getOption('timezone'));
+ ngModelCtrl.$setValidity('dateDisabled', !date ||
+ this.element && !this.isDisabled(date));
}
};
this.createDateObject = function(date, format) {
var model = ngModelCtrl.$viewValue ? new Date(ngModelCtrl.$viewValue) : null;
- return {
+ model = dateParser.fromTimezone(model, ngModelOptions.getOption('timezone'));
+ var today = new Date();
+ today = dateParser.fromTimezone(today, ngModelOptions.getOption('timezone'));
+ var time = this.compare(date, today);
+ var dt = {
date: date,
- label: dateFilter(date, format),
+ label: dateParser.filter(date, format),
selected: model && this.compare(date, model) === 0,
disabled: this.isDisabled(date),
- current: this.compare(date, new Date()) === 0,
- customClass: this.customClass(date)
+ past: time < 0,
+ current: time === 0,
+ future: time > 0,
+ customClass: this.customClass(date) || null
};
+
+ if (model && this.compare(date, model) === 0) {
+ $scope.selectedDt = dt;
+ }
+
+ if (self.activeDate && this.compare(dt.date, self.activeDate) === 0) {
+ $scope.activeDt = dt;
+ }
+
+ return dt;
};
- this.isDisabled = function( date ) {
- return ((this.minDate && this.compare(date, this.minDate) < 0) || (this.maxDate && this.compare(date, this.maxDate) > 0) || ($attrs.dateDisabled && $scope.dateDisabled({date: date, mode: $scope.datepickerMode})));
+ this.isDisabled = function(date) {
+ return $scope.disabled ||
+ this.minDate && this.compare(date, this.minDate) < 0 ||
+ this.maxDate && this.compare(date, this.maxDate) > 0 ||
+ $scope.dateDisabled && $scope.dateDisabled({date: date, mode: $scope.datepickerMode});
};
- this.customClass = function( date ) {
- return $scope.customClass({date: date, mode: $scope.datepickerMode});
- };
+ this.customClass = function(date) {
+ return $scope.customClass({date: date, mode: $scope.datepickerMode});
+ };
// Split array into smaller arrays
this.split = function(arr, size) {
@@ -128,616 +262,424 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
return arrays;
};
- $scope.select = function( date ) {
- if ( $scope.datepickerMode === self.minMode ) {
- var dt = ngModelCtrl.$viewValue ? new Date( ngModelCtrl.$viewValue ) : new Date(0, 0, 0, 0, 0, 0, 0);
- dt.setFullYear( date.getFullYear(), date.getMonth(), date.getDate() );
- ngModelCtrl.$setViewValue( dt );
+ $scope.select = function(date) {
+ if ($scope.datepickerMode === self.minMode) {
+ var dt = ngModelCtrl.$viewValue ? dateParser.fromTimezone(new Date(ngModelCtrl.$viewValue), ngModelOptions.getOption('timezone')) : new Date(0, 0, 0, 0, 0, 0, 0);
+ dt.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
+ dt = dateParser.toTimezone(dt, ngModelOptions.getOption('timezone'));
+ ngModelCtrl.$setViewValue(dt);
ngModelCtrl.$render();
} else {
self.activeDate = date;
- $scope.datepickerMode = self.modes[ self.modes.indexOf( $scope.datepickerMode ) - 1 ];
+ setMode(self.modes[self.modes.indexOf($scope.datepickerMode) - 1]);
+
+ $scope.$emit('uib:datepicker.mode');
}
+
+ $scope.$broadcast('uib:datepicker.focus');
};
- $scope.move = function( direction ) {
+ $scope.move = function(direction) {
var year = self.activeDate.getFullYear() + direction * (self.step.years || 0),
month = self.activeDate.getMonth() + direction * (self.step.months || 0);
self.activeDate.setFullYear(year, month, 1);
self.refreshView();
};
- $scope.toggleMode = function( direction ) {
+ $scope.toggleMode = function(direction) {
direction = direction || 1;
- if (($scope.datepickerMode === self.maxMode && direction === 1) || ($scope.datepickerMode === self.minMode && direction === -1)) {
+ if ($scope.datepickerMode === self.maxMode && direction === 1 ||
+ $scope.datepickerMode === self.minMode && direction === -1) {
return;
}
- $scope.datepickerMode = self.modes[ self.modes.indexOf( $scope.datepickerMode ) + direction ];
+ setMode(self.modes[self.modes.indexOf($scope.datepickerMode) + direction]);
+
+ $scope.$emit('uib:datepicker.mode');
};
// Key event mapper
- $scope.keys = { 13:'enter', 32:'space', 33:'pageup', 34:'pagedown', 35:'end', 36:'home', 37:'left', 38:'up', 39:'right', 40:'down' };
+ $scope.keys = { 13: 'enter', 32: 'space', 33: 'pageup', 34: 'pagedown', 35: 'end', 36: 'home', 37: 'left', 38: 'up', 39: 'right', 40: 'down' };
var focusElement = function() {
- $timeout(function() {
- self.element[0].focus();
- }, 0 , false);
+ self.element[0].focus();
};
// Listen for focus requests from popup directive
- $scope.$on('datepicker.focus', focusElement);
+ $scope.$on('uib:datepicker.focus', focusElement);
- $scope.keydown = function( evt ) {
+ $scope.keydown = function(evt) {
var key = $scope.keys[evt.which];
- if ( !key || evt.shiftKey || evt.altKey ) {
+ if (!key || evt.shiftKey || evt.altKey || $scope.disabled) {
return;
}
evt.preventDefault();
- if(!self.shortcutPropagation){
- evt.stopPropagation();
+ if (!self.shortcutPropagation) {
+ evt.stopPropagation();
}
if (key === 'enter' || key === 'space') {
- if ( self.isDisabled(self.activeDate)) {
+ if (self.isDisabled(self.activeDate)) {
return; // do nothing
}
$scope.select(self.activeDate);
- focusElement();
} else if (evt.ctrlKey && (key === 'up' || key === 'down')) {
$scope.toggleMode(key === 'up' ? 1 : -1);
- focusElement();
} else {
self.handleKeyDown(key, evt);
self.refreshView();
}
};
-}])
-.directive( 'datepicker', function () {
- return {
- restrict: 'EA',
- replace: true,
- templateUrl: 'template/datepicker/datepicker.html',
- scope: {
- datepickerMode: '=?',
- dateDisabled: '&',
- customClass: '&',
- shortcutPropagation: '&?'
- },
- require: ['datepicker', '?^ngModel'],
- controller: 'DatepickerController',
- link: function(scope, element, attrs, ctrls) {
- var datepickerCtrl = ctrls[0], ngModelCtrl = ctrls[1];
+ $element.on('keydown', function(evt) {
+ $scope.$apply(function() {
+ $scope.keydown(evt);
+ });
+ });
- if ( ngModelCtrl ) {
- datepickerCtrl.init( ngModelCtrl );
- }
+ $scope.$on('$destroy', function() {
+ //Clear all watch listeners on destroy
+ while (watchListeners.length) {
+ watchListeners.shift()();
}
- };
-})
-
-.directive('daypicker', ['dateFilter', function (dateFilter) {
- return {
- restrict: 'EA',
- replace: true,
- templateUrl: 'template/datepicker/day.html',
- require: '^datepicker',
- link: function(scope, element, attrs, ctrl) {
- scope.showWeeks = ctrl.showWeeks;
-
- ctrl.step = { months: 1 };
- ctrl.element = element;
-
- var DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
- function getDaysInMonth( year, month ) {
- return ((month === 1) && (year % 4 === 0) && ((year % 100 !== 0) || (year % 400 === 0))) ? 29 : DAYS_IN_MONTH[month];
- }
-
- function getDates(startDate, n) {
- var dates = new Array(n), current = new Date(startDate), i = 0;
- current.setHours(12); // Prevent repeated dates because of timezone bug
- while ( i < n ) {
- dates[i++] = new Date(current);
- current.setDate( current.getDate() + 1 );
- }
- return dates;
- }
-
- ctrl._refreshView = function() {
- var year = ctrl.activeDate.getFullYear(),
- month = ctrl.activeDate.getMonth(),
- firstDayOfMonth = new Date(year, month, 1),
- difference = ctrl.startingDay - firstDayOfMonth.getDay(),
- numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : - difference,
- firstDate = new Date(firstDayOfMonth);
-
- if ( numDisplayedFromPreviousMonth > 0 ) {
- firstDate.setDate( - numDisplayedFromPreviousMonth + 1 );
- }
-
- // 42 is the number of days on a six-month calendar
- var days = getDates(firstDate, 42);
- for (var i = 0; i < 42; i ++) {
- days[i] = angular.extend(ctrl.createDateObject(days[i], ctrl.formatDay), {
- secondary: days[i].getMonth() !== month,
- uid: scope.uniqueId + '-' + i
- });
- }
-
- scope.labels = new Array(7);
- for (var j = 0; j < 7; j++) {
- scope.labels[j] = {
- abbr: dateFilter(days[j].date, ctrl.formatDayHeader),
- full: dateFilter(days[j].date, 'EEEE')
- };
- }
-
- scope.title = dateFilter(ctrl.activeDate, ctrl.formatDayTitle);
- scope.rows = ctrl.split(days, 7);
+ });
- if ( scope.showWeeks ) {
- scope.weekNumbers = [];
- var thursdayIndex = (4 + 7 - ctrl.startingDay) % 7,
- numWeeks = scope.rows.length;
- for (var curWeek = 0; curWeek < numWeeks; curWeek++) {
- scope.weekNumbers.push(
- getISO8601WeekNumber( scope.rows[curWeek][thursdayIndex].date ));
- }
- }
- };
+ function setMode(mode) {
+ $scope.datepickerMode = mode;
+ $scope.datepickerOptions.datepickerMode = mode;
+ }
- ctrl.compare = function(date1, date2) {
- return (new Date( date1.getFullYear(), date1.getMonth(), date1.getDate() ) - new Date( date2.getFullYear(), date2.getMonth(), date2.getDate() ) );
- };
+ function extractOptions(ngModelCtrl) {
+ var ngModelOptions;
- function getISO8601WeekNumber(date) {
- var checkDate = new Date(date);
- checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7)); // Thursday
- var time = checkDate.getTime();
- checkDate.setMonth(0); // Compare with Jan 1
- checkDate.setDate(1);
- return Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;
- }
+ if (angular.version.minor < 6) { // in angular < 1.6 $options could be missing
+ // guarantee a value
+ ngModelOptions = ngModelCtrl.$options ||
+ $scope.datepickerOptions.ngModelOptions ||
+ datepickerConfig.ngModelOptions ||
+ {};
- ctrl.handleKeyDown = function( key, evt ) {
- var date = ctrl.activeDate.getDate();
-
- if (key === 'left') {
- date = date - 1; // up
- } else if (key === 'up') {
- date = date - 7; // down
- } else if (key === 'right') {
- date = date + 1; // down
- } else if (key === 'down') {
- date = date + 7;
- } else if (key === 'pageup' || key === 'pagedown') {
- var month = ctrl.activeDate.getMonth() + (key === 'pageup' ? - 1 : 1);
- ctrl.activeDate.setMonth(month, 1);
- date = Math.min(getDaysInMonth(ctrl.activeDate.getFullYear(), ctrl.activeDate.getMonth()), date);
- } else if (key === 'home') {
- date = 1;
- } else if (key === 'end') {
- date = getDaysInMonth(ctrl.activeDate.getFullYear(), ctrl.activeDate.getMonth());
- }
- ctrl.activeDate.setDate(date);
+ // mimic 1.6+ api
+ ngModelOptions.getOption = function (key) {
+ return ngModelOptions[key];
};
-
- ctrl.refreshView();
+ } else { // in angular >=1.6 $options is always present
+ // ng-model-options defaults timezone to null; don't let its precedence squash a non-null value
+ var timezone = ngModelCtrl.$options.getOption('timezone') ||
+ ($scope.datepickerOptions.ngModelOptions ? $scope.datepickerOptions.ngModelOptions.timezone : null) ||
+ (datepickerConfig.ngModelOptions ? datepickerConfig.ngModelOptions.timezone : null);
+
+ // values passed to createChild override existing values
+ ngModelOptions = ngModelCtrl.$options // start with a ModelOptions instance
+ .createChild(datepickerConfig.ngModelOptions) // lowest precedence
+ .createChild($scope.datepickerOptions.ngModelOptions)
+ .createChild(ngModelCtrl.$options) // highest precedence
+ .createChild({timezone: timezone}); // to keep from squashing a non-null value
}
- };
-}])
-.directive('monthpicker', ['dateFilter', function (dateFilter) {
- return {
- restrict: 'EA',
- replace: true,
- templateUrl: 'template/datepicker/month.html',
- require: '^datepicker',
- link: function(scope, element, attrs, ctrl) {
- ctrl.step = { years: 1 };
- ctrl.element = element;
-
- ctrl._refreshView = function() {
- var months = new Array(12),
- year = ctrl.activeDate.getFullYear();
-
- for ( var i = 0; i < 12; i++ ) {
- months[i] = angular.extend(ctrl.createDateObject(new Date(year, i, 1), ctrl.formatMonth), {
- uid: scope.uniqueId + '-' + i
- });
- }
+ return ngModelOptions;
+ }
+}])
- scope.title = dateFilter(ctrl.activeDate, ctrl.formatMonthTitle);
- scope.rows = ctrl.split(months, 3);
- };
+.controller('UibDaypickerController', ['$scope', '$element', 'dateFilter', function(scope, $element, dateFilter) {
+ var DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
- ctrl.compare = function(date1, date2) {
- return new Date( date1.getFullYear(), date1.getMonth() ) - new Date( date2.getFullYear(), date2.getMonth() );
- };
+ this.step = { months: 1 };
+ this.element = $element;
+ function getDaysInMonth(year, month) {
+ return month === 1 && year % 4 === 0 &&
+ (year % 100 !== 0 || year % 400 === 0) ? 29 : DAYS_IN_MONTH[month];
+ }
- ctrl.handleKeyDown = function( key, evt ) {
- var date = ctrl.activeDate.getMonth();
-
- if (key === 'left') {
- date = date - 1; // up
- } else if (key === 'up') {
- date = date - 3; // down
- } else if (key === 'right') {
- date = date + 1; // down
- } else if (key === 'down') {
- date = date + 3;
- } else if (key === 'pageup' || key === 'pagedown') {
- var year = ctrl.activeDate.getFullYear() + (key === 'pageup' ? - 1 : 1);
- ctrl.activeDate.setFullYear(year);
- } else if (key === 'home') {
- date = 0;
- } else if (key === 'end') {
- date = 11;
- }
- ctrl.activeDate.setMonth(date);
- };
+ this.init = function(ctrl) {
+ angular.extend(ctrl, this);
+ scope.showWeeks = ctrl.showWeeks;
+ ctrl.refreshView();
+ };
- ctrl.refreshView();
+ this.getDates = function(startDate, n) {
+ var dates = new Array(n), current = new Date(startDate), i = 0, date;
+ while (i < n) {
+ date = new Date(current);
+ dates[i++] = date;
+ current.setDate(current.getDate() + 1);
}
+ return dates;
};
-}])
-.directive('yearpicker', ['dateFilter', function (dateFilter) {
- return {
- restrict: 'EA',
- replace: true,
- templateUrl: 'template/datepicker/year.html',
- require: '^datepicker',
- link: function(scope, element, attrs, ctrl) {
- var range = ctrl.yearRange;
-
- ctrl.step = { years: range };
- ctrl.element = element;
-
- function getStartingYear( year ) {
- return parseInt((year - 1) / range, 10) * range + 1;
- }
+ this._refreshView = function() {
+ var year = this.activeDate.getFullYear(),
+ month = this.activeDate.getMonth(),
+ firstDayOfMonth = new Date(this.activeDate);
- ctrl._refreshView = function() {
- var years = new Array(range);
+ firstDayOfMonth.setFullYear(year, month, 1);
- for ( var i = 0, start = getStartingYear(ctrl.activeDate.getFullYear()); i < range; i++ ) {
- years[i] = angular.extend(ctrl.createDateObject(new Date(start + i, 0, 1), ctrl.formatYear), {
- uid: scope.uniqueId + '-' + i
- });
- }
+ var difference = this.startingDay - firstDayOfMonth.getDay(),
+ numDisplayedFromPreviousMonth = difference > 0 ?
+ 7 - difference : - difference,
+ firstDate = new Date(firstDayOfMonth);
- scope.title = [years[0].label, years[range - 1].label].join(' - ');
- scope.rows = ctrl.split(years, 5);
- };
+ if (numDisplayedFromPreviousMonth > 0) {
+ firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
+ }
- ctrl.compare = function(date1, date2) {
- return date1.getFullYear() - date2.getFullYear();
- };
+ // 42 is the number of days on a six-week calendar
+ var days = this.getDates(firstDate, 42);
+ for (var i = 0; i < 42; i ++) {
+ days[i] = angular.extend(this.createDateObject(days[i], this.formatDay), {
+ secondary: days[i].getMonth() !== month,
+ uid: scope.uniqueId + '-' + i
+ });
+ }
- ctrl.handleKeyDown = function( key, evt ) {
- var date = ctrl.activeDate.getFullYear();
-
- if (key === 'left') {
- date = date - 1; // up
- } else if (key === 'up') {
- date = date - 5; // down
- } else if (key === 'right') {
- date = date + 1; // down
- } else if (key === 'down') {
- date = date + 5;
- } else if (key === 'pageup' || key === 'pagedown') {
- date += (key === 'pageup' ? - 1 : 1) * ctrl.step.years;
- } else if (key === 'home') {
- date = getStartingYear( ctrl.activeDate.getFullYear() );
- } else if (key === 'end') {
- date = getStartingYear( ctrl.activeDate.getFullYear() ) + range - 1;
- }
- ctrl.activeDate.setFullYear(date);
+ scope.labels = new Array(7);
+ for (var j = 0; j < 7; j++) {
+ scope.labels[j] = {
+ abbr: dateFilter(days[j].date, this.formatDayHeader),
+ full: dateFilter(days[j].date, 'EEEE')
};
-
- ctrl.refreshView();
}
- };
-}])
-
-.constant('datepickerPopupConfig', {
- datepickerPopup: 'yyyy-MM-dd',
- html5Types: {
- date: 'yyyy-MM-dd',
- 'datetime-local': 'yyyy-MM-ddTHH:mm:ss.sss',
- 'month': 'yyyy-MM'
- },
- currentText: 'Today',
- clearText: 'Clear',
- closeText: 'Done',
- closeOnDateSelection: true,
- appendToBody: false,
- showButtonBar: true
-})
-
-.directive('datepickerPopup', ['$compile', '$parse', '$document', '$position', 'dateFilter', 'dateParser', 'datepickerPopupConfig',
-function ($compile, $parse, $document, $position, dateFilter, dateParser, datepickerPopupConfig) {
- return {
- restrict: 'EA',
- require: 'ngModel',
- scope: {
- isOpen: '=?',
- currentText: '@',
- clearText: '@',
- closeText: '@',
- dateDisabled: '&',
- customClass: '&'
- },
- link: function(scope, element, attrs, ngModel) {
- var dateFormat,
- closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? scope.$parent.$eval(attrs.closeOnDateSelection) : datepickerPopupConfig.closeOnDateSelection,
- appendToBody = angular.isDefined(attrs.datepickerAppendToBody) ? scope.$parent.$eval(attrs.datepickerAppendToBody) : datepickerPopupConfig.appendToBody;
-
- scope.showButtonBar = angular.isDefined(attrs.showButtonBar) ? scope.$parent.$eval(attrs.showButtonBar) : datepickerPopupConfig.showButtonBar;
- scope.getText = function( key ) {
- return scope[key + 'Text'] || datepickerPopupConfig[key + 'Text'];
- };
+ scope.title = dateFilter(this.activeDate, this.formatDayTitle);
+ scope.rows = this.split(days, 7);
- var isHtml5DateInput = false;
- if (datepickerPopupConfig.html5Types[attrs.type]) {
- dateFormat = datepickerPopupConfig.html5Types[attrs.type];
- isHtml5DateInput = true;
- } else {
- dateFormat = attrs.datepickerPopup || datepickerPopupConfig.datepickerPopup;
- attrs.$observe('datepickerPopup', function(value, oldValue) {
- var newDateFormat = value || datepickerPopupConfig.datepickerPopup;
- // Invalidate the $modelValue to ensure that formatters re-run
- // FIXME: Refactor when PR is merged: https://github.com/angular/angular.js/pull/10764
- if (newDateFormat !== dateFormat) {
- dateFormat = newDateFormat;
- ngModel.$modelValue = null;
-
- if (!dateFormat) {
- throw new Error('datepickerPopup must have a date format specified.');
- }
- }
- });
+ if (scope.showWeeks) {
+ scope.weekNumbers = [];
+ var thursdayIndex = (4 + 7 - this.startingDay) % 7,
+ numWeeks = scope.rows.length;
+ for (var curWeek = 0; curWeek < numWeeks; curWeek++) {
+ scope.weekNumbers.push(
+ getISO8601WeekNumber(scope.rows[curWeek][thursdayIndex].date));
}
+ }
+ };
- if (!dateFormat) {
- throw new Error('datepickerPopup must have a date format specified.');
- }
+ this.compare = function(date1, date2) {
+ var _date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
+ var _date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+ _date1.setFullYear(date1.getFullYear());
+ _date2.setFullYear(date2.getFullYear());
+ return _date1 - _date2;
+ };
- if (isHtml5DateInput && attrs.datepickerPopup) {
- throw new Error('HTML5 date input types do not support custom formats.');
- }
+ function getISO8601WeekNumber(date) {
+ var checkDate = new Date(date);
+ checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7)); // Thursday
+ var time = checkDate.getTime();
+ checkDate.setMonth(0); // Compare with Jan 1
+ checkDate.setDate(1);
+ return Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;
+ }
- // popup element used to display calendar
- var popupEl = angular.element('Formatting codes playground
++ + +
++ + +
+');
- popupEl.attr({
- 'ng-model': 'date',
- 'ng-change': 'dateSelection()'
- });
+ this.handleKeyDown = function(key, evt) {
+ var date = this.activeDate.getDate();
+
+ if (key === 'left') {
+ date = date - 1;
+ } else if (key === 'up') {
+ date = date - 7;
+ } else if (key === 'right') {
+ date = date + 1;
+ } else if (key === 'down') {
+ date = date + 7;
+ } else if (key === 'pageup' || key === 'pagedown') {
+ var month = this.activeDate.getMonth() + (key === 'pageup' ? - 1 : 1);
+ this.activeDate.setMonth(month, 1);
+ date = Math.min(getDaysInMonth(this.activeDate.getFullYear(), this.activeDate.getMonth()), date);
+ } else if (key === 'home') {
+ date = 1;
+ } else if (key === 'end') {
+ date = getDaysInMonth(this.activeDate.getFullYear(), this.activeDate.getMonth());
+ }
+ this.activeDate.setDate(date);
+ };
+}])
- function cameltoDash( string ){
- return string.replace(/([A-Z])/g, function($1) { return '-' + $1.toLowerCase(); });
- }
+.controller('UibMonthpickerController', ['$scope', '$element', 'dateFilter', function(scope, $element, dateFilter) {
+ this.step = { years: 1 };
+ this.element = $element;
- // datepicker element
- var datepickerEl = angular.element(popupEl.children()[0]);
- if (isHtml5DateInput) {
- if (attrs.type == 'month') {
- datepickerEl.attr('datepicker-mode', '"month"');
- datepickerEl.attr('min-mode', 'month');
- }
- }
+ this.init = function(ctrl) {
+ angular.extend(ctrl, this);
+ ctrl.refreshView();
+ };
- if ( attrs.datepickerOptions ) {
- var options = scope.$parent.$eval(attrs.datepickerOptions);
- if(options.initDate) {
- scope.initDate = options.initDate;
- datepickerEl.attr( 'init-date', 'initDate' );
- delete options.initDate;
- }
- angular.forEach(options, function( value, option ) {
- datepickerEl.attr( cameltoDash(option), value );
- });
- }
+ this._refreshView = function() {
+ var months = new Array(12),
+ year = this.activeDate.getFullYear(),
+ date;
- scope.watchData = {};
- angular.forEach(['minDate', 'maxDate', 'datepickerMode', 'initDate', 'shortcutPropagation'], function( key ) {
- if ( attrs[key] ) {
- var getAttribute = $parse(attrs[key]);
- scope.$parent.$watch(getAttribute, function(value){
- scope.watchData[key] = value;
- });
- datepickerEl.attr(cameltoDash(key), 'watchData.' + key);
-
- // Propagate changes from datepicker to outside
- if ( key === 'datepickerMode' ) {
- var setAttribute = getAttribute.assign;
- scope.$watch('watchData.' + key, function(value, oldvalue) {
- if ( angular.isFunction(setAttribute) && value !== oldvalue ) {
- setAttribute(scope.$parent, value);
- }
- });
- }
- }
+ for (var i = 0; i < 12; i++) {
+ date = new Date(this.activeDate);
+ date.setFullYear(year, i, 1);
+ months[i] = angular.extend(this.createDateObject(date, this.formatMonth), {
+ uid: scope.uniqueId + '-' + i
});
- if (attrs.dateDisabled) {
- datepickerEl.attr('date-disabled', 'dateDisabled({ date: date, mode: mode })');
- }
-
- if (attrs.showWeeks) {
- datepickerEl.attr('show-weeks', attrs.showWeeks);
- }
+ }
- if (attrs.customClass){
- datepickerEl.attr('custom-class', 'customClass({ date: date, mode: mode })');
- }
+ scope.title = dateFilter(this.activeDate, this.formatMonthTitle);
+ scope.rows = this.split(months, this.monthColumns);
+ scope.yearHeaderColspan = this.monthColumns > 3 ? this.monthColumns - 2 : 1;
+ };
- function parseDate(viewValue) {
- if (angular.isNumber(viewValue)) {
- // presumably timestamp to date object
- viewValue = new Date(viewValue);
- }
+ this.compare = function(date1, date2) {
+ var _date1 = new Date(date1.getFullYear(), date1.getMonth());
+ var _date2 = new Date(date2.getFullYear(), date2.getMonth());
+ _date1.setFullYear(date1.getFullYear());
+ _date2.setFullYear(date2.getFullYear());
+ return _date1 - _date2;
+ };
- if (!viewValue) {
- return null;
- } else if (angular.isDate(viewValue) && !isNaN(viewValue)) {
- return viewValue;
- } else if (angular.isString(viewValue)) {
- var date = dateParser.parse(viewValue, dateFormat, scope.date) || new Date(viewValue);
- if (isNaN(date)) {
- return undefined;
- } else {
- return date;
- }
- } else {
- return undefined;
- }
- }
+ this.handleKeyDown = function(key, evt) {
+ var date = this.activeDate.getMonth();
+
+ if (key === 'left') {
+ date = date - 1;
+ } else if (key === 'up') {
+ date = date - this.monthColumns;
+ } else if (key === 'right') {
+ date = date + 1;
+ } else if (key === 'down') {
+ date = date + this.monthColumns;
+ } else if (key === 'pageup' || key === 'pagedown') {
+ var year = this.activeDate.getFullYear() + (key === 'pageup' ? - 1 : 1);
+ this.activeDate.setFullYear(year);
+ } else if (key === 'home') {
+ date = 0;
+ } else if (key === 'end') {
+ date = 11;
+ }
+ this.activeDate.setMonth(date);
+ };
+}])
- function validator(modelValue, viewValue) {
- var value = modelValue || viewValue;
- if (angular.isNumber(value)) {
- value = new Date(value);
- }
- if (!value) {
- return true;
- } else if (angular.isDate(value) && !isNaN(value)) {
- return true;
- } else if (angular.isString(value)) {
- var date = dateParser.parse(value, dateFormat) || new Date(value);
- return !isNaN(date);
- } else {
- return false;
- }
- }
+.controller('UibYearpickerController', ['$scope', '$element', 'dateFilter', function(scope, $element, dateFilter) {
+ var columns, range;
+ this.element = $element;
- if (!isHtml5DateInput) {
- // Internal API to maintain the correct ng-invalid-[key] class
- ngModel.$$parserName = 'date';
- ngModel.$validators.date = validator;
- ngModel.$parsers.unshift(parseDate);
- ngModel.$formatters.push(function (value) {
- scope.date = value;
- return ngModel.$isEmpty(value) ? value : dateFilter(value, dateFormat);
- });
- }
- else {
- ngModel.$formatters.push(function (value) {
- scope.date = value;
- return value;
- });
- }
+ function getStartingYear(year) {
+ return parseInt((year - 1) / range, 10) * range + 1;
+ }
- // Inner change
- scope.dateSelection = function(dt) {
- if (angular.isDefined(dt)) {
- scope.date = dt;
- }
- var date = scope.date ? dateFilter(scope.date, dateFormat) : '';
- element.val(date);
- ngModel.$setViewValue(date);
+ this.yearpickerInit = function() {
+ columns = this.yearColumns;
+ range = this.yearRows * columns;
+ this.step = { years: range };
+ };
- if ( closeOnDateSelection ) {
- scope.isOpen = false;
- element[0].focus();
- }
- };
+ this._refreshView = function() {
+ var years = new Array(range), date;
- // Detect changes in the view from the text box
- ngModel.$viewChangeListeners.push(function () {
- scope.date = dateParser.parse(ngModel.$viewValue, dateFormat, scope.date) || new Date(ngModel.$viewValue);
+ for (var i = 0, start = getStartingYear(this.activeDate.getFullYear()); i < range; i++) {
+ date = new Date(this.activeDate);
+ date.setFullYear(start + i, 0, 1);
+ years[i] = angular.extend(this.createDateObject(date, this.formatYear), {
+ uid: scope.uniqueId + '-' + i
});
+ }
- var documentClickBind = function(event) {
- if (scope.isOpen && event.target !== element[0]) {
- scope.$apply(function() {
- scope.isOpen = false;
- });
- }
- };
-
- var keydown = function(evt, noApply) {
- scope.keydown(evt);
- };
- element.bind('keydown', keydown);
+ scope.title = [years[0].label, years[range - 1].label].join(' - ');
+ scope.rows = this.split(years, columns);
+ scope.columns = columns;
+ };
- scope.keydown = function(evt) {
- if (evt.which === 27) {
- evt.preventDefault();
- if (scope.isOpen) {
- evt.stopPropagation();
- }
- scope.close();
- } else if (evt.which === 40 && !scope.isOpen) {
- scope.isOpen = true;
- }
- };
+ this.compare = function(date1, date2) {
+ return date1.getFullYear() - date2.getFullYear();
+ };
- scope.$watch('isOpen', function(value) {
- if (value) {
- scope.$broadcast('datepicker.focus');
- scope.position = appendToBody ? $position.offset(element) : $position.position(element);
- scope.position.top = scope.position.top + element.prop('offsetHeight');
+ this.handleKeyDown = function(key, evt) {
+ var date = this.activeDate.getFullYear();
+
+ if (key === 'left') {
+ date = date - 1;
+ } else if (key === 'up') {
+ date = date - columns;
+ } else if (key === 'right') {
+ date = date + 1;
+ } else if (key === 'down') {
+ date = date + columns;
+ } else if (key === 'pageup' || key === 'pagedown') {
+ date += (key === 'pageup' ? - 1 : 1) * range;
+ } else if (key === 'home') {
+ date = getStartingYear(this.activeDate.getFullYear());
+ } else if (key === 'end') {
+ date = getStartingYear(this.activeDate.getFullYear()) + range - 1;
+ }
+ this.activeDate.setFullYear(date);
+ };
+}])
- $document.bind('click', documentClickBind);
- } else {
- $document.unbind('click', documentClickBind);
- }
- });
+.directive('uibDatepicker', function() {
+ return {
+ templateUrl: function(element, attrs) {
+ return attrs.templateUrl || 'uib/template/datepicker/datepicker.html';
+ },
+ scope: {
+ datepickerOptions: '=?'
+ },
+ require: ['uibDatepicker', '^ngModel'],
+ restrict: 'A',
+ controller: 'UibDatepickerController',
+ controllerAs: 'datepicker',
+ link: function(scope, element, attrs, ctrls) {
+ var datepickerCtrl = ctrls[0], ngModelCtrl = ctrls[1];
- scope.select = function( date ) {
- if (date === 'today') {
- var today = new Date();
- if (angular.isDate(scope.date)) {
- date = new Date(scope.date);
- date.setFullYear(today.getFullYear(), today.getMonth(), today.getDate());
- } else {
- date = new Date(today.setHours(0, 0, 0, 0));
- }
- }
- scope.dateSelection( date );
- };
+ datepickerCtrl.init(ngModelCtrl);
+ }
+ };
+})
- scope.close = function() {
- scope.isOpen = false;
- element[0].focus();
- };
+.directive('uibDaypicker', function() {
+ return {
+ templateUrl: function(element, attrs) {
+ return attrs.templateUrl || 'uib/template/datepicker/day.html';
+ },
+ require: ['^uibDatepicker', 'uibDaypicker'],
+ restrict: 'A',
+ controller: 'UibDaypickerController',
+ link: function(scope, element, attrs, ctrls) {
+ var datepickerCtrl = ctrls[0],
+ daypickerCtrl = ctrls[1];
- var $popup = $compile(popupEl)(scope);
- // Prevent jQuery cache memory leak (template is now redundant after linking)
- popupEl.remove();
+ daypickerCtrl.init(datepickerCtrl);
+ }
+ };
+})
- if ( appendToBody ) {
- $document.find('body').append($popup);
- } else {
- element.after($popup);
- }
+.directive('uibMonthpicker', function() {
+ return {
+ templateUrl: function(element, attrs) {
+ return attrs.templateUrl || 'uib/template/datepicker/month.html';
+ },
+ require: ['^uibDatepicker', 'uibMonthpicker'],
+ restrict: 'A',
+ controller: 'UibMonthpickerController',
+ link: function(scope, element, attrs, ctrls) {
+ var datepickerCtrl = ctrls[0],
+ monthpickerCtrl = ctrls[1];
- scope.$on('$destroy', function() {
- $popup.remove();
- element.unbind('keydown', keydown);
- $document.unbind('click', documentClickBind);
- });
+ monthpickerCtrl.init(datepickerCtrl);
}
};
-}])
+})
-.directive('datepickerPopupWrap', function() {
+.directive('uibYearpicker', function() {
return {
- restrict:'EA',
- replace: true,
- transclude: true,
- templateUrl: 'template/datepicker/popup.html',
- link:function (scope, element, attrs) {
- element.bind('click', function(event) {
- event.preventDefault();
- event.stopPropagation();
- });
+ templateUrl: function(element, attrs) {
+ return attrs.templateUrl || 'uib/template/datepicker/year.html';
+ },
+ require: ['^uibDatepicker', 'uibYearpicker'],
+ restrict: 'A',
+ controller: 'UibYearpickerController',
+ link: function(scope, element, attrs, ctrls) {
+ var ctrl = ctrls[0];
+ angular.extend(ctrl, ctrls[1]);
+ ctrl.yearpickerInit();
+
+ ctrl.refreshView();
}
};
});
diff --git a/src/datepicker/docs/demo.html b/src/datepicker/docs/demo.html
index 7ea3b98fd2..e083965698 100644
--- a/src/datepicker/docs/demo.html
+++ b/src/datepicker/docs/demo.html
@@ -15,38 +15,12 @@
Inline
-
-
- Popup
-
-
-
-
-
- - - - - -
-
-
- - - - - -
-
-
-
-
+
- + - -
| - | - | + | + | + | |||
|---|---|---|---|---|---|---|---|
| @@ -11,10 +11,19 @@ | |||||||
| {{ weekNumbers[$index] }} | -- + | + | |||||
| - | - | + | + | + | |||
|---|---|---|---|---|---|---|---|
| - + | |||||||
| + | |||||||
| - | - | + | + | + | |||
|---|---|---|---|---|---|---|---|
| - + | |||||||
| + | |||||||