Skip to content

Determine initial min-max value 8.1 #6555

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.

Sign up for GitHub

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

Merged
merged 4 commits into from
Feb 13, 2020
Merged

Determine initial min-max value 8.1 #6555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
62ec656
fix(IgxTimePicker): determine initial min-max value #6494
jackofdiamond5 Jan 28, 2020
cb34356
Merge branch '8.1.x' into bpenkov/fix-6494-8.1
jackofdiamond5 Feb 5, 2020
38683bd
fix(IgxTimePicker): set displayValue to mask if no value is present #…
jackofdiamond5 Feb 6, 2020
2ee0740
Merge branch '8.1.x' into bpenkov/fix-6494-8.1
kdinev Feb 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 50 additions & 27 deletions projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,10 +196,32 @@ describe('IgxTimePicker', () => {
expect(timePicker.onValidationFailed.emit).toHaveBeenCalled();
}));

it('TimePicker cancel button', fakeAsync(() => {
it('Should display mask on cancel button click with bound null value', fakeAsync(() => {
const fixture = TestBed.createComponent(IgxTimePickerWithPmTimeComponent);
fixture.componentInstance.dateValue = null;
fixture.componentInstance.mode = 'dropdown';
fixture.detectChanges();
const timePicker = fixture.componentInstance.timePicker;
const dom = fixture.debugElement;
const timePickerTarget = dom.query(By.directive(IgxInputDirective));
spyOn(timePicker.onValidationFailed, 'emit');

UIInteractions.clickElement(timePickerTarget);
tick();
fixture.detectChanges();

const cancelButton = dom.query(By.css('.igx-button--flat'));
UIInteractions.clickElement(cancelButton);
tick();
fixture.detectChanges();

expect(timePicker.onValidationFailed.emit).not.toHaveBeenCalled();
expect(timePicker.displayValue).toEqual('--:-- --');
}));

it('TimePicker cancel button', fakeAsync(() => {
const fixture = TestBed.createComponent(IgxTimePickerWithPmTimeComponent);
fixture.detectChanges();
const timePicker = fixture.componentInstance.timePicker;
const dom = fixture.debugElement;
const initialTime = dom.query(By.directive(IgxInputDirective)).nativeElement.value;
Expand Down Expand Up @@ -1540,34 +1562,34 @@ describe('IgxTimePicker', () => {
}));

it('When timepicker is closed via outside click, the focus should NOT remain on the input',
fakeAsync(() => {
fixture.detectChanges();
input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
fakeAsync(() => {
fixture.detectChanges();
input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');

expect(overlayToggle.length).toEqual(0);
expect(overlayToggle.length).toEqual(0);

const iconTime = dom.queryAll(By.css('.igx-icon'))[0];
UIInteractions.clickElement(iconTime);
tick();
fixture.detectChanges();
const iconTime = dom.queryAll(By.css('.igx-icon'))[0];
UIInteractions.clickElement(iconTime);
tick();
fixture.detectChanges();

overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
expect(overlayToggle[0]).not.toBeNull();
expect(overlayToggle[0]).not.toBeUndefined();
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
expect(overlayToggle[0]).not.toBeNull();
expect(overlayToggle[0]).not.toBeUndefined();

const dummyInput = fixture.componentInstance.dummyInput.nativeElement;
dummyInput.focus();
dummyInput.click();
tick();
fixture.detectChanges();
const dummyInput = fixture.componentInstance.dummyInput.nativeElement;
dummyInput.focus();
dummyInput.click();
tick();
fixture.detectChanges();

overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
expect(overlayToggle[0]).toEqual(undefined);
expect(input).not.toEqual(document.activeElement);
expect(dummyInput).toEqual(document.activeElement);
}));
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
expect(overlayToggle[0]).toEqual(undefined);
expect(input).not.toEqual(document.activeElement);
expect(dummyInput).toEqual(document.activeElement);
}));
});

describe('Timepicker with outlet', () => {
Expand Down Expand Up @@ -1916,12 +1938,13 @@ export class IgxTimePickerWithPassedTimeComponent {

@Component({
template: `
<igx-time-picker [value]="dateValue" [format]="customFormat"></igx-time-picker>
<igx-time-picker [mode]="mode" [value]="dateValue" [format]="customFormat"></igx-time-picker>
`
})
export class IgxTimePickerWithPmTimeComponent {
public dateValue: Date = new Date(2017, 7, 7, 12, 27);
public customFormat = 'h:mm tt';
public dateValue: Date = new Date(2017, 7, 7, 12, 27, 23);
public customFormat = 'h:mm:ss tt';
public mode = 'dialog';
@ViewChild(IgxTimePickerComponent, { static: true }) public timePicker: IgxTimePickerComponent;
}

Expand Down
15 changes: 9 additions & 6 deletions projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1153,9 +1153,9 @@ export class IgxTimePickerComponent implements
return false;
} else if (this.minValue && value < this._convertMinMaxValue(this.minValue)) {
return false;
} else {
return true;
}

return true;
}

private _isEntryValid(val: string): boolean {
Expand Down Expand Up @@ -1294,6 +1294,10 @@ export class IgxTimePickerComponent implements
const oldValue = this.value;
const newVal = this._convertMinMaxValue(this.displayValue);

if (this.displayValue === this.parseMask(false)) {
return;
}

if (this._isValueValid(newVal)) {
if (!this.value || oldValue.getTime() !== newVal.getTime()) {
this.value = newVal;
Expand Down Expand Up @@ -1331,7 +1335,6 @@ export class IgxTimePickerComponent implements
// use this flag to make sure that min/maxValue are checked (in _convertMinMaxValue() method)
// against the real value when initializing the component and value is bound via ngModel
this._dateFromModel = value;

this.value = value;

if (this.mode === InteractionMode.DropDown) {
Expand Down Expand Up @@ -1559,7 +1562,7 @@ export class IgxTimePickerComponent implements
*/
public cancelButtonClick(): void {
if (this.mode === InteractionMode.DropDown) {
this.displayValue = this._formatTime(this.value, this.format);
this.displayValue = this.value ? this._formatTime(this.value, this.format) : this.parseMask(false);
}

this.close();
Expand Down Expand Up @@ -1790,8 +1793,8 @@ export class IgxTimePickerComponent implements
}

// minor hack for preventing cursor jumping in IE
this._displayValue = this.inputFormat.transform(displayVal);
this.input.nativeElement.value = this._displayValue;
this.displayValue = this.inputFormat.transform(displayVal);
this.input.nativeElement.value = this.displayValue;
this._setCursorPosition(cursor);

requestAnimationFrame(() => {
Expand Down
46 changes: 25 additions & 21 deletions src/app/time-picker/time-picker.sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,23 @@
<article class="timepicker-column">
<h4 class="sample-title">Time Picker with Dropdown</h4>
<div class="sample-description">{{showDate(date)}}</div>
<div class="preview" style="width: 200px">
<igx-time-picker #tp (onValueChanged)="valueChanged($event)"
<div class="preview" style="width: 280px">
<igx-time-picker #tp (onValueChanged)="valueChanged($event)" [minValue]="'9:15 AM'" [maxValue]="'9:15 PM'"
(onValidationFailed)="validationFailed($event)" [mode]="mode" [isSpinLoop]="isSpinLoop"
[(ngModel)]="date" [itemsDelta]="itemsDelta" [format]="format">
</igx-time-picker>
</div>
</article>
<article class="timepicker-column">
<h4 class="sample-title">Time Picker with Dropdown Hour Mode</h4>
<div class="sample-description">{{showDate(date1)}}</div>
<div class="sample-description">Mask: {{hourModeTimePicker.mask}}, Format: {{hourModeTimePicker.format}}</div>
<div class="preview" style="width: 200px">
<igx-time-picker #hourModeTimePicker [mode]="'dropdown'" [(ngModel)]="date1" [format]="'h tt'">
</igx-time-picker>
</div>
</article>
<article class="timepicker-column">
<h4 class="sample-title">Time Picker with Dropdown Hour Mode</h4>
<div class="sample-description">{{showDate(date1)}}</div>
<div class="sample-description">Mask: {{hourModeTimePicker.mask}}, Format: {{hourModeTimePicker.format}}
</div>
<div class="preview" style="width: 200px">
<igx-time-picker #hourModeTimePicker [mode]="'dropdown'" [(ngModel)]="date1" [format]="'h tt'">
</igx-time-picker>
</div>
</article>
<article class="timepicker-column">
<h4 class="sample-title">Horizontal Time Picker</h4>
<p class="sample-description">AM/PM Time format</p>
Expand Down Expand Up @@ -64,15 +65,13 @@ <h4 class="sample-title">Templated Time Picker</h4>
<p class="sample-description">Time picker with required input group</p>
<div class="preview">
<igx-time-picker #templatedTimePicker [value]="today">
<ng-template igxTimePickerTemplate
let-openDialog="openDialog"
let-value="value">
<ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value">
<igx-input-group [supressInputAutofocus]="true">
<label igxLabel>Required</label>
<igx-prefix (click)="openDialog()">
<igx-icon>access_time</igx-icon>
</igx-prefix>
<input igxInput [value]="showDate(value)" [required]="isRequired"/>
<input igxInput [value]="showDate(value)" [required]="isRequired" />
<igx-suffix igxRipple (click)="change()">
<igx-icon fontSet="material">star</igx-icon>
</igx-suffix>
Expand All @@ -85,10 +84,13 @@ <h4 class="sample-title">Templated Time Picker</h4>
<h4 class="sample-title">Templated Time Picker</h4>
<p class="sample-description">Time picker with dropdown mode</p>
<div class="preview">
<igx-time-picker [value]="today" [okButtonLabel]="''" [cancelButtonLabel]="''" format="HH:mm" mode="dropdown">
<ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value" let-displayTime="displayTime">
<igx-time-picker [value]="today" [okButtonLabel]="''" [cancelButtonLabel]="''" format="HH:mm"
mode="dropdown">
<ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value"
let-displayTime="displayTime">
<igx-input-group>
<input #dropDownTarget igxInput [value]="displayTime" (blur)="onBlur(dropDownTarget.value, value)"/>
<input #dropDownTarget igxInput [value]="displayTime"
(blur)="onBlur(dropDownTarget.value, value)" />
<igx-suffix>
<igx-icon (click)="openDialog(dropDownTarget)">access_time</igx-icon>
</igx-suffix>
Expand All @@ -101,10 +103,12 @@ <h4 class="sample-title">Templated Time Picker</h4>
<h4 class="sample-title">Templated Time Picker</h4>
<p class="sample-description">Time picker with dropdown mode + overlay settings + custom buttons</p>
<div class="preview">
<igx-time-picker #picker [value]="val" [overlaySettings]="myOverlaySettings" format="HH:mm" [mode]="'dropdown'">
<ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value" let-displayValue="displayValue">
<igx-time-picker #picker [value]="val" [overlaySettings]="myOverlaySettings" format="HH:mm:ss"
[mode]="'dropdown'">
<ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value"
let-displayValue="displayValue">
<igx-input-group>
<input #target igxInput [value]="displayValue" (blur)="onBlur(target.value, value)"/>
<input #target igxInput [value]="displayValue" (blur)="onBlur(target.value, value)" />
<igx-suffix>
<igx-icon (click)="openDialog(target)">access_time</igx-icon>
</igx-suffix>
Expand Down
4 changes: 2 additions & 2 deletions src/app/time-picker/time-picker.sample.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ export class TimePickerSampleComponent implements AfterViewInit {
mode = InteractionMode.DropDown;

date1 = new Date(2018, 10, 27, 17, 45, 0, 0);
date = new Date(2018, 10, 27, 17, 45, 0, 0);
val = new Date(0, 0, 0, 19, 35, 0, 0);
date = new Date(2018, 10, 27, 21, 55, 0, 0);
val = new Date(0, 0, 0, 19, 35, 30, 0);
today = new Date(Date.now());

isRequired = true;
Expand Down