-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(datepicker): better support for input and change events #4826
Changes from 4 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -16,6 +16,7 @@ import { | |
Input, | ||
OnDestroy, | ||
Optional, | ||
Output, | ||
Renderer2 | ||
} from '@angular/core'; | ||
import {MdDatepicker} from './datepicker'; | ||
|
@@ -52,6 +53,21 @@ export const MD_DATEPICKER_VALIDATORS: any = { | |
}; | ||
|
||
|
||
/** | ||
* An event used for datepicker input and change events. We don't always have access to a native | ||
* input or change event because the event may have been triggered by the user clicking on the | ||
* calendar popup. For consistency we always use MdDatepickerInputEvent instead. | ||
*/ | ||
export class MdDatepickerInputEvent<D> { | ||
/** The new value for the target datepicker input. */ | ||
value: D | null; | ||
|
||
constructor(public target: MdDatepickerInput<D>, public targetElement: HTMLElement) { | ||
this.value = this.target.value; | ||
} | ||
} | ||
|
||
|
||
/** Directive used to connect an input to a MdDatepicker. */ | ||
@Directive({ | ||
selector: 'input[mdDatepicker], input[matDatepicker]', | ||
|
@@ -64,9 +80,11 @@ export const MD_DATEPICKER_VALIDATORS: any = { | |
'[attr.max]': 'max ? _dateAdapter.getISODateString(max) : null', | ||
'[disabled]': 'disabled', | ||
'(input)': '_onInput($event.target.value)', | ||
'(change)': '_onChange()', | ||
'(blur)': '_onTouched()', | ||
'(keydown)': '_onKeydown($event)', | ||
} | ||
}, | ||
exportAs: 'mdDatepickerInput', | ||
}) | ||
export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAccessor, OnDestroy, | ||
Validator { | ||
|
@@ -134,6 +152,10 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces | |
} | ||
private _disabled: boolean; | ||
|
||
@Output() dateChange = new EventEmitter<MdDatepickerInputEvent<D>>(); | ||
|
||
@Output() dateInput = new EventEmitter<MdDatepickerInputEvent<D>>(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Add user-facing JsDoc for these events |
||
|
||
/** Emits when the value changes (either due to user input or programmatic change). */ | ||
_valueChange = new EventEmitter<D|null>(); | ||
|
||
|
@@ -189,6 +211,8 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces | |
this._datepicker.selectedChanged.subscribe((selected: D) => { | ||
this.value = selected; | ||
this._cvaOnChange(selected); | ||
this.dateInput.emit(new MdDatepickerInputEvent(this, this._elementRef.nativeElement)); | ||
this.dateChange.emit(new MdDatepickerInputEvent(this, this._elementRef.nativeElement)); | ||
}); | ||
} | ||
} | ||
|
@@ -246,5 +270,10 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces | |
let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput); | ||
this._cvaOnChange(date); | ||
this._valueChange.emit(date); | ||
this.dateInput.emit(new MdDatepickerInputEvent(this, this._elementRef.nativeElement)); | ||
} | ||
|
||
_onChange() { | ||
this.dateChange.emit(new MdDatepickerInputEvent(this, this._elementRef.nativeElement)); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -29,6 +29,7 @@ describe('MdDatepicker', () => { | |
ReactiveFormsModule, | ||
], | ||
declarations: [ | ||
DatepickerWithChangeAndInputEvents, | ||
DatepickerWithFilterAndValidation, | ||
DatepickerWithFormControl, | ||
DatepickerWithMinAndMaxValidation, | ||
|
@@ -656,6 +657,81 @@ describe('MdDatepicker', () => { | |
expect(cells[1].classList).not.toContain('mat-calendar-body-disabled'); | ||
}); | ||
}); | ||
|
||
describe('datepicker with change and input events', () => { | ||
let fixture: ComponentFixture<DatepickerWithChangeAndInputEvents>; | ||
let testComponent: DatepickerWithChangeAndInputEvents; | ||
let inputEl: HTMLInputElement; | ||
|
||
beforeEach(async(() => { | ||
fixture = TestBed.createComponent(DatepickerWithChangeAndInputEvents); | ||
fixture.detectChanges(); | ||
|
||
testComponent = fixture.componentInstance; | ||
inputEl = fixture.debugElement.query(By.css('input')).nativeElement; | ||
|
||
spyOn(testComponent, 'onChange'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Another option would be to use testComponent.onChange = jasmine.createSpy('onChange');
testComponent.onInput = jasmine.createSpy('onInput');
... There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It won't let me just add properties like that, it complains that There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oh, I guess you'd need to add them on the testComponent too anyway. So I guess it doesn't really help. |
||
spyOn(testComponent, 'onInput'); | ||
spyOn(testComponent, 'onDateChange'); | ||
spyOn(testComponent, 'onDateInput'); | ||
})); | ||
|
||
afterEach(async(() => { | ||
testComponent.datepicker.close(); | ||
fixture.detectChanges(); | ||
})); | ||
|
||
it('should fire input and dateInput events when user types input', () => { | ||
expect(testComponent.onChange).not.toHaveBeenCalled(); | ||
expect(testComponent.onDateChange).not.toHaveBeenCalled(); | ||
expect(testComponent.onInput).not.toHaveBeenCalled(); | ||
expect(testComponent.onDateInput).not.toHaveBeenCalled(); | ||
|
||
dispatchFakeEvent(inputEl, 'input'); | ||
fixture.detectChanges(); | ||
|
||
expect(testComponent.onChange).not.toHaveBeenCalled(); | ||
expect(testComponent.onDateChange).not.toHaveBeenCalled(); | ||
expect(testComponent.onInput).toHaveBeenCalled(); | ||
expect(testComponent.onDateInput).toHaveBeenCalled(); | ||
}); | ||
|
||
it('should fire change and dateChange events when user commits typed input', () => { | ||
expect(testComponent.onChange).not.toHaveBeenCalled(); | ||
expect(testComponent.onDateChange).not.toHaveBeenCalled(); | ||
expect(testComponent.onInput).not.toHaveBeenCalled(); | ||
expect(testComponent.onDateInput).not.toHaveBeenCalled(); | ||
|
||
dispatchFakeEvent(inputEl, 'change'); | ||
fixture.detectChanges(); | ||
|
||
expect(testComponent.onChange).toHaveBeenCalled(); | ||
expect(testComponent.onDateChange).toHaveBeenCalled(); | ||
expect(testComponent.onInput).not.toHaveBeenCalled(); | ||
expect(testComponent.onDateInput).not.toHaveBeenCalled(); | ||
}); | ||
|
||
it('should fire dateChange and dateInput events when user selects calendar date', () => { | ||
expect(testComponent.onChange).not.toHaveBeenCalled(); | ||
expect(testComponent.onDateChange).not.toHaveBeenCalled(); | ||
expect(testComponent.onInput).not.toHaveBeenCalled(); | ||
expect(testComponent.onDateInput).not.toHaveBeenCalled(); | ||
|
||
testComponent.datepicker.open(); | ||
fixture.detectChanges(); | ||
|
||
expect(document.querySelector('md-dialog-container')).not.toBeNull(); | ||
|
||
let cells = document.querySelectorAll('.mat-calendar-body-cell'); | ||
dispatchMouseEvent(cells[0], 'click'); | ||
fixture.detectChanges(); | ||
|
||
expect(testComponent.onChange).not.toHaveBeenCalled(); | ||
expect(testComponent.onDateChange).toHaveBeenCalled(); | ||
expect(testComponent.onInput).not.toHaveBeenCalled(); | ||
expect(testComponent.onDateInput).toHaveBeenCalled(); | ||
}); | ||
}); | ||
}); | ||
|
||
describe('with missing DateAdapter and MD_DATE_FORMATS', () => { | ||
|
@@ -891,3 +967,23 @@ class DatepickerWithFilterAndValidation { | |
date: Date; | ||
filter = (date: Date) => date.getDate() != 1; | ||
} | ||
|
||
|
||
@Component({ | ||
template: ` | ||
<input [mdDatepicker]="d" (change)="onChange()" (input)="onInput()" | ||
(dateChange)="onDateChange()" (dateInput)="onDateInput()"> | ||
<md-datepicker #d [touchUi]="true"></md-datepicker> | ||
` | ||
}) | ||
class DatepickerWithChangeAndInputEvents { | ||
@ViewChild('d') datepicker: MdDatepicker<Date>; | ||
|
||
onChange() {} | ||
|
||
onInput() {} | ||
|
||
onDateChange() {} | ||
|
||
onDateInput() {} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit:
For consistency we always
->For consistency, we always use