Skip to content

Commit 1b33b03

Browse files
LipataLipata
authored
Merge branch '8.1.x' into astaev/issue4967-8.1.x
2 parents 6291bae + 57b418b commit 1b33b03

File tree

7 files changed

+128
-34
lines changed

7 files changed

+128
-34
lines changed

‎CHANGELOG.md

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22

33
All notable changes for each version of this project will be documented in this file.
44

5+
## 8.1.2
6+
7+
### New Features
8+
- `IgxDatePicker`
9+
- `valueChange` event is added.
10+
511
## 8.1.0
612

713
### New Features
@@ -15,7 +21,7 @@ All notable changes for each version of this project will be documented in this
1521
- **Behavioral Change** - paging now includes the group rows in the page size. You may find more information about the change in the [GroupBy Specification](https://github.com/IgniteUI/igniteui-angular/wiki/Group-By-Specification)
1622
- `IgxColumnGroup`
1723
- Re-templating the column group header is now possible using the `headerTemplate` input property or the `igxHeader` directive.
18-
- `igx-grid-footer`
24+
- `igx-grid-footer`
1925
- You can use this to insert a custom footer in the grids.
2026
```html
2127
<igx-grid>
@@ -41,21 +47,21 @@ All notable changes for each version of this project will be documented in this
4147

4248
## 8.0.2
4349
- `igx-list-theme` now have some new parameters for styling.
44-
- $item-background-hover - Change The list item hover background
50+
- $item-background-hover - Change The list item hover background
4551
- $item-text-color-hover - Change The list item hover text color.
46-
52+
4753
- $item-subtitle-color - Change The list item subtitle color.
4854
- $item-subtitle-color-hover - Change The list item hover subtitle color.
4955
- $item-subtitle-color-active - Change The active list item subtitle color.
50-
56+
5157
- $item-action-color - Change The list item actions color.
5258
- $item-action-color-hover - Change The list item hover actions color.
5359
- $item-action-color-active - Change The active list item actions color.
54-
60+
5561
- $item-thumbnail-color - Change The list item thumbnail color.
5662
- $item-thumbnail-color-hover - Change The list item hover thumbnail color.
5763
- $item-thumbnail-color-active - Change The active list item thumbnail color.
58-
64+
5965
- **Behavioral Change** default min column width is changed according the grid display density property:
6066
- for `DisplayDensity.comfortable` defaultMinWidth is `80px`;
6167
- for `DisplayDensity.cosy` defaultMinWidth is `64px`;

‎projects/igniteui-angular/src/lib/date-picker/README.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ In order to re-template a date picker in `dropdown` mode, you should pass the dr
8181
```html
8282
<igx-date-picker>
8383
<ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value" let-displayData="displayData">
84-
<igx-input-group (click)="openDialog(dropDownTarget)" #dropDownTarget>
84+
<igx-input-group (click)="openDialog(dropDownTarget)" #dropDownTarget>
8585
<label igxLabel>Date</label>
8686
<input igxInput [value]="displayData"/>
8787
</igx-input-group>
@@ -133,10 +133,12 @@ The DatePicker action buttons could be retemplated.
133133
| Name | Return Type | Description |
134134
|:--:|:---|:---|
135135
| `onSelection` | `Date` | Fired when selection is made in the calendar. The event contains the selected value(s) based on the type of selection the component is set to |
136-
| `onOpen` | `datePicker` | Emitted when a datePicker calendar is being opened. |
137-
| `onClose` | `datePicker` | Emitted when a datePicker calendar is being closed. |
136+
| `onOpened` | `datePicker` | Emitted when a datePicker calendar is opened. |
137+
| `onClosed` | `datePicker` | Emitted when a datePicker calendar is closed. |
138+
| `onClosing` | `CancelableBrowserEventArgs` | Emitted when a datePicker calendar is being closed. |
138139
| `onDisabledDate` | `IDatePickerDisabledDateEventArgs` | Emitted when a disabled date is entered in `dropdown` mode. |
139140
| `onValidationFailed` | `IDatePickerValidationFailedEventArgs` | Emitted when an invalid date is entered in `dropdown` mode. |
141+
| `valueChange` | `Date` | Fired when date picker value is changed |
140142

141143
### Methods
142144
| Name | Arguments | Return Type | Description |

‎projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -74,15 +74,15 @@ describe('IgxDatePicker', () => {
7474
const dom = fixture.debugElement;
7575
const target = dom.query(By.css('.igx-date-picker__input-date'));
7676

77-
spyOn(datePicker.onOpen, 'emit');
78-
spyOn(datePicker.onClose, 'emit');
77+
spyOn(datePicker.onOpened, 'emit');
78+
spyOn(datePicker.onClosed, 'emit');
7979

8080
UIInteractions.clickElement(target);
8181
fixture.detectChanges();
8282
await wait();
8383

84-
expect(datePicker.onOpen.emit).toHaveBeenCalled();
85-
expect(datePicker.onOpen.emit).toHaveBeenCalledWith(datePicker);
84+
expect(datePicker.onOpened.emit).toHaveBeenCalled();
85+
expect(datePicker.onOpened.emit).toHaveBeenCalledWith(datePicker);
8686

8787
const overlayDiv = document.getElementsByClassName('igx-overlay__wrapper--modal')[0];
8888
expect(overlayDiv).toBeDefined();
@@ -92,17 +92,20 @@ describe('IgxDatePicker', () => {
9292
fixture.detectChanges();
9393
await wait();
9494

95-
expect(datePicker.onClose.emit).toHaveBeenCalled();
96-
expect(datePicker.onClose.emit).toHaveBeenCalledWith(datePicker);
95+
expect(datePicker.onClosed.emit).toHaveBeenCalled();
96+
expect(datePicker.onClosed.emit).toHaveBeenCalledWith(datePicker);
9797
});
9898

99-
it('Datepicker onSelection event and selectDate method propagation', () => {
99+
it('Datepicker onSelection and valueChange events and selectDate method propagation', () => {
100100
spyOn(datePicker.onSelection, 'emit');
101+
spyOn(datePicker.valueChange, 'emit');
101102
const newDate: Date = new Date(2016, 4, 6);
102-
datePicker.selectDate(newDate);
103+
datePicker.selectDate(newDate);
103104
fixture.detectChanges();
104105

105106
expect(datePicker.onSelection.emit).toHaveBeenCalled();
107+
expect(datePicker.valueChange.emit).toHaveBeenCalled();
108+
expect(datePicker.valueChange.emit).toHaveBeenCalledWith(newDate);
106109
expect(datePicker.value).toBe(newDate);
107110
});
108111

@@ -611,15 +614,15 @@ describe('IgxDatePicker', () => {
611614
const iconDate = dom.query(By.css('.igx-icon'));
612615
expect(iconDate).not.toBeNull();
613616

614-
spyOn(datePicker.onOpen, 'emit');
615-
spyOn(datePicker.onClose, 'emit');
617+
spyOn(datePicker.onOpened, 'emit');
618+
spyOn(datePicker.onClosed, 'emit');
616619

617620
UIInteractions.clickElement(iconDate);
618621
fixture.detectChanges();
619622
await wait();
620623

621-
expect(datePicker.onOpen.emit).toHaveBeenCalled();
622-
expect(datePicker.onOpen.emit).toHaveBeenCalledWith(datePicker);
624+
expect(datePicker.onOpened.emit).toHaveBeenCalled();
625+
expect(datePicker.onOpened.emit).toHaveBeenCalledWith(datePicker);
623626

624627
const dropDown = document.getElementsByClassName('igx-date-picker--dropdown');
625628
expect(dropDown.length).toBe(1);
@@ -630,8 +633,8 @@ describe('IgxDatePicker', () => {
630633
fixture.detectChanges();
631634
await wait();
632635

633-
expect(datePicker.onClose.emit).toHaveBeenCalled();
634-
expect(datePicker.onClose.emit).toHaveBeenCalledWith(datePicker);
636+
expect(datePicker.onClosed.emit).toHaveBeenCalled();
637+
expect(datePicker.onClosed.emit).toHaveBeenCalledWith(datePicker);
635638
});
636639

637640
it('Handling keyboard navigation with `space`(open) and `esc`(close) buttons - dropdown mode', fakeAsync(() => {
@@ -677,13 +680,16 @@ describe('IgxDatePicker', () => {
677680
expect(overlays.length).toEqual(0);
678681
}));
679682

680-
it('Datepicker onSelection event and selectDate method propagation - dropdown mode', () => {
683+
it('Datepicker onSelection and valueChange events and selectDate method propagation - dropdown mode', () => {
681684
spyOn(datePicker.onSelection, 'emit');
685+
spyOn(datePicker.valueChange, 'emit');
682686
const newDate: Date = new Date(2016, 4, 6);
683687
datePicker.selectDate(newDate);
684688
fixture.detectChanges();
685689

686690
expect(datePicker.onSelection.emit).toHaveBeenCalled();
691+
expect(datePicker.valueChange.emit).toHaveBeenCalled();
692+
expect(datePicker.valueChange.emit).toHaveBeenCalledWith(newDate);
687693
expect(datePicker.value).toBe(newDate);
688694

689695
const input = fixture.debugElement.query(By.directive(IgxInputDirective));
@@ -923,12 +929,15 @@ describe('IgxDatePicker', () => {
923929
}));
924930

925931
it('should reset value on clear button click - dropdown mode', () => {
926-
const input = fixture.debugElement.query(By.directive(IgxInputDirective));
932+
spyOn(datePicker.valueChange, 'emit');
933+
const input = fixture.debugElement.query(By.directive(IgxInputDirective));
927934
const dom = fixture.debugElement;
928935
const clear = dom.queryAll(By.css('.igx-icon'))[1];
929936
UIInteractions.clickElement(clear);
930937
fixture.detectChanges();
931938

939+
expect(datePicker.valueChange.emit).toHaveBeenCalled();
940+
expect(datePicker.valueChange.emit).toHaveBeenCalledWith(null);
932941
expect(datePicker.value).toEqual(null);
933942
expect(input.nativeElement.innerText).toEqual('');
934943

‎projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ import {
5151
} from './date-picker.utils';
5252
import { DatePickerDisplayValuePipe, DatePickerInputValuePipe } from './date-picker.pipes';
5353
import { IDatePicker } from './date-picker.common';
54-
import { KEYS, CancelableBrowserEventArgs, isIE } from '../core/utils';
54+
import { KEYS, CancelableBrowserEventArgs, isIE, isEqual } from '../core/utils';
5555
import { IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective } from './date-picker.directives';
5656
import { IgxCalendarContainerComponent } from './calendar-container.component';
5757
import { InteractionMode } from '../core/enums';
@@ -623,6 +623,20 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
623623
@Output()
624624
public onSelection = new EventEmitter<Date>();
625625

626+
/**
627+
*An @Output property that is fired when date picker value is changed.
628+
*```typescript
629+
*public valueChanged(event){
630+
* alert("Date picker value is changed");
631+
*}
632+
*```
633+
*```html
634+
*<igx-date-picker (valueChange)="valueChanged($event)" mode="dropdown"></igx-date-picker>
635+
*```
636+
*/
637+
@Output()
638+
public valueChange = new EventEmitter<Date>();
639+
626640
/**
627641
*An @Output property that fires when the user types/spins to a disabled date in the date-picker editor.
628642
*```typescript
@@ -907,7 +921,10 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
907921
* @memberOf {@link IgxDatePickerComponent}
908922
*/
909923
public selectDate(date: Date): void {
924+
const oldValue = this.value;
910925
this.value = date;
926+
927+
this.emitValueChangeEvent(oldValue, this.value );
911928
this.onSelection.emit(date);
912929
this._onChangeCallback(date);
913930
}
@@ -924,7 +941,9 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
924941
* @memberOf {@link IgxDatePickerComponent}
925942
*/
926943
public deselectDate(): void {
944+
const oldValue = this.value;
927945
this.value = null;
946+
this.emitValueChangeEvent(oldValue, this.value );
928947
if (this.calendar) {
929948
this.calendar.deselectDate();
930949
}
@@ -1009,8 +1028,10 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
10091028
date.setSeconds(this.value.getSeconds());
10101029
date.setMilliseconds(this.value.getMilliseconds());
10111030
}
1012-
1031+
const oldValue = this.value;
10131032
this.value = date;
1033+
1034+
this.emitValueChangeEvent(oldValue, this.value );
10141035
this.calendar.viewDate = date;
10151036
this._onChangeCallback(date);
10161037
this.closeCalendar();
@@ -1128,6 +1149,12 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
11281149
}
11291150
}
11301151

1152+
private emitValueChangeEvent(oldValue: Date, newValue: Date) {
1153+
if (!isEqual(oldValue, newValue)) {
1154+
this.valueChange.emit(newValue);
1155+
}
1156+
}
1157+
11311158
private calculateDate(dateString: string, invokedByEvent: string): void {
11321159
if (dateString !== '') {
11331160
const prevDateValue = this.value;
@@ -1146,9 +1173,12 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
11461173

11471174
if (this.disabledDates === null
11481175
|| (this.disabledDates !== null && !isDateInRanges(newValue, this.disabledDates))) {
1149-
this.value = newValue;
1150-
this.invalidDate = '';
1151-
this._onChangeCallback(newValue);
1176+
const oldValue = this.value;
1177+
this.value = newValue;
1178+
1179+
this.emitValueChangeEvent(oldValue, this.value );
1180+
this.invalidDate = '';
1181+
this._onChangeCallback(newValue);
11521182
} else {
11531183
const args: IDatePickerDisabledDateEventArgs = {
11541184
datePicker: this,

‎projects/igniteui-angular/src/lib/grids/cell.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
[igxFocus]="focused" [disableRipple]="true"></igx-checkbox>
2222
</ng-container>
2323
<ng-container *ngIf="column.dataType === 'date'">
24-
<igx-date-picker [style.width.%]="100" [outlet]="grid.outletDirective" mode="dropdown" (onSelection)="editValue = $event"
25-
[locale]="grid.locale" [value]="editValue" [igxFocus]="focused" [labelVisibility]="false">
24+
<igx-date-picker [style.width.%]="100" [outlet]="grid.outletDirective" mode="dropdown"
25+
[locale]="grid.locale" [(value)]="editValue" [igxFocus]="focused" [labelVisibility]="false">
2626
</igx-date-picker>
2727
</ng-container>
2828
</ng-template>

‎projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -432,6 +432,53 @@ describe('IgxGrid - Cell component', () => {
432432
expect(cell.value.getTime()).toBe(selectedDate.getTime());
433433
});
434434

435+
it('should be able to change value form date picker input-- date', () => {
436+
const cell = grid.getCellByColumn(0, 'birthday');
437+
const cellDomDate = fixture.debugElement.queryAll(By.css(CELL_CSS_CLASS))[3];
438+
const selectedDate = new Date('04/12/2017');
439+
const editValue = '04/12/2017';
440+
441+
cellDomDate.triggerEventHandler('dblclick', {});
442+
fixture.detectChanges();
443+
444+
expect(cell.editMode).toBe(true);
445+
const datePicker = cellDomDate.query(By.css('igx-date-picker')).componentInstance;
446+
expect(datePicker).toBeDefined();
447+
448+
const editTemplate = cellDomDate.query(By.css('.igx-date-picker__input-date'));
449+
UIInteractions.sendInput(editTemplate, editValue);
450+
fixture.detectChanges();
451+
452+
expect(datePicker.value).toEqual(selectedDate);
453+
UIInteractions.triggerKeyDownEvtUponElem('enter', cellDomDate.nativeElement, true);
454+
fixture.detectChanges();
455+
456+
expect(cell.editMode).toBe(false);
457+
expect(cell.value.getTime()).toEqual(selectedDate.getTime());
458+
});
459+
460+
it('should be able to clear value -- date', () => {
461+
const cell = grid.getCellByColumn(0, 'birthday');
462+
const cellDomDate = fixture.debugElement.queryAll(By.css(CELL_CSS_CLASS))[3];
463+
464+
cellDomDate.triggerEventHandler('dblclick', {});
465+
fixture.detectChanges();
466+
467+
expect(cell.editMode).toBe(true);
468+
const datePicker = cellDomDate.query(By.css('igx-date-picker')).componentInstance;
469+
expect(datePicker).toBeDefined();
470+
471+
const clear = cellDomDate.queryAll(By.css('.igx-icon'))[1];
472+
UIInteractions.clickElement(clear);
473+
474+
expect(datePicker.value).toBeNull();
475+
UIInteractions.triggerKeyDownEvtUponElem('enter', cellDomDate.nativeElement, true);
476+
fixture.detectChanges();
477+
478+
expect(cell.editMode).toBe(false);
479+
expect(cell.value).toBeNull();
480+
});
481+
435482
it('should exit edit mode on filtering', () => {
436483
let cell = grid.getCellByColumn(0, 'fullName');
437484
const cellDom = fixture.debugElement.queryAll(By.css(CELL_CSS_CLASS))[0];

‎projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
<igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue" [disableRipple]="true"></igx-checkbox>
2121
</ng-container>
2222
<ng-container *ngIf="column.dataType === 'date'">
23-
<igx-date-picker [style.width.%]="100" [outlet]="grid.outletDirective" mode="dropdown" (onSelection)="editValue = $event"
24-
[locale]="grid.locale" [value]="editValue" [igxFocus]="focused" [labelVisibility]="false">
23+
<igx-date-picker [style.width.%]="100" [outlet]="grid.outletDirective" mode="dropdown"
24+
[locale]="grid.locale" [(value)]="editValue" [igxFocus]="focused" [labelVisibility]="false">
2525
</igx-date-picker>
2626
</ng-container>
2727
</ng-template>

0 commit comments

Comments
 (0)