')($rootScope);
+ $rootScope.$digest();
+ assignElements(wrapElement);
+
+ changeInputValueTo = function (el, value) {
+ el.val(value);
+ el.trigger($sniffer.hasEvent('input') ? 'input' : 'change');
+ $rootScope.$digest();
+ };
+ }));
+
+ it('to display the correct value in input', function() {
+ expect(inputEl.val()).toBe('2010-09-30');
+ });
+
+ it('does not to display datepicker initially', function() {
+ expect(dropdownEl.css('display')).toBe('none');
+ });
+
+ it('displays datepicker on input focus', function() {
+ inputEl.focus();
+ expect(dropdownEl.css('display')).not.toBe('none');
+ });
+
+ it('renders the calendar correctly', function() {
+ expect(getLabelsRow().css('display')).not.toBe('none');
+ expect(getLabels()).toEqual(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']);
+ expect(getOptions()).toEqual([
+ ['29', '30', '31', '01', '02', '03', '04'],
+ ['05', '06', '07', '08', '09', '10', '11'],
+ ['12', '13', '14', '15', '16', '17', '18'],
+ ['19', '20', '21', '22', '23', '24', '25'],
+ ['26', '27', '28', '29', '30', '01', '02']
+ ]);
+ });
+
+ it('updates the input when a day is clicked', function() {
+ clickOption(2, 3);
+ expect(inputEl.val()).toBe('2010-09-15');
+ expect($rootScope.date).toEqual(new Date('September 15, 2010 15:30:00'));
+ });
+
+ it('updates the input correctly when model changes', function() {
+ $rootScope.date = new Date("January 10, 1983 10:00:00");
+ $rootScope.$digest();
+ expect(inputEl.val()).toBe('1983-01-10');
+ });
+
+ it('closes the dropdown when a day is clicked', function() {
+ inputEl.focus();
+ expect(dropdownEl.css('display')).not.toBe('none');
+
+ clickOption(2, 3);
+ expect(dropdownEl.css('display')).toBe('none');
+ });
+
+ it('updates the model when input value changes', function() {
+ changeInputValueTo(inputEl, 'March 5, 1980');
+ expect($rootScope.date.getFullYear()).toEqual(1980);
+ expect($rootScope.date.getMonth()).toEqual(2);
+ expect($rootScope.date.getDate()).toEqual(5);
+ });
+
+ it('closes when click outside of calendar', function() {
+ $document.find('body').click();
+ expect(dropdownEl.css('display')).toBe('none');
+ });
+
+ describe('toggles programatically by `open` attribute', function () {
+ beforeEach(inject(function() {
+ $rootScope.open = true;
+ var wrapElement = $compile('
')($rootScope);
+ $rootScope.$digest();
+ assignElements(wrapElement);
+ }));
+
+ it('to display initially', function() {
+ expect(dropdownEl.css('display')).not.toBe('none');
+ });
+
+ it('to close / open from scope variable', function() {
+ expect(dropdownEl.css('display')).not.toBe('none');
+ $rootScope.open = false;
+ $rootScope.$digest();
+ expect(dropdownEl.css('display')).toBe('none');
+
+ $rootScope.open = true;
+ $rootScope.$digest();
+ expect(dropdownEl.css('display')).not.toBe('none');
+ });
+ });
+
+ describe('custom format', function () {
+ beforeEach(inject(function() {
+ var wrapElement = $compile('
')($rootScope);
+ $rootScope.$digest();
+ assignElements(wrapElement);
+ }));
+
+ it('to display the correct value in input', function() {
+ expect(inputEl.val()).toBe('30-September-2010');
+ });
+
+ it('updates the input when a day is clicked', function() {
+ clickOption(2, 3);
+ expect(inputEl.val()).toBe('15-September-2010');
+ expect($rootScope.date).toEqual(new Date('September 15, 2010 15:30:00'));
+ });
+
+ it('updates the input correctly when model changes', function() {
+ $rootScope.date = new Date("January 10, 1983 10:00:00");
+ $rootScope.$digest();
+ expect(inputEl.val()).toBe('10-January-1983');
+ });
+ });
+
+ describe('use with ng-required directive', function() {
+ beforeEach(inject(function() {
+ $rootScope.date = '';
+ var wrapElement = $compile('
')($rootScope);
+ $rootScope.$digest();
+ assignElements(wrapElement);
+ }));
+
+ it('should be invalid initially', function() {
+ expect(inputEl.hasClass('ng-invalid')).toBeTruthy();
+ });
+ it('should be valid if model has been specified', function() {
+ $rootScope.date = new Date();
+ $rootScope.$digest();
+ expect(inputEl.hasClass('ng-valid')).toBeTruthy();
+ });
+ });
+
+ });
+
});
describe('datepicker directive with empty initial state', function () {
@@ -736,7 +1104,7 @@ describe('datepicker directive with empty initial state', function () {
$compile = _$compile_;
$rootScope = _$rootScope_;
$rootScope.date = null;
- element = $compile('
')($rootScope);
+ element = $compile('
')($rootScope);
$rootScope.$digest();
}));
diff --git a/template/datepicker/datepicker.html b/template/datepicker/datepicker.html
index 708f4f7577..bc54142737 100644
--- a/template/datepicker/datepicker.html
+++ b/template/datepicker/datepicker.html
@@ -1,4 +1,4 @@
-
+
|
@@ -14,7 +14,7 @@
| {{ getWeekNumber(row) }} |
-
+
|
diff --git a/template/datepicker/popup.html b/template/datepicker/popup.html
new file mode 100644
index 0000000000..77b04a263e
--- /dev/null
+++ b/template/datepicker/popup.html
@@ -0,0 +1,12 @@
+
\ No newline at end of file