Skip to content

Commit 9ccee70

Browse files
jackofdiamond5jackofdiamond5
committed
fix(IgxTimePicker): determine initial min-max value #6494 
1 parent 223df3d commit 9ccee70

File tree

3 files changed

+35
-24
lines changed

3 files changed

+35
-24
lines changed

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

+9-2
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,14 @@ export class IgxTimePickerComponent implements
143143
};
144144
this.onValueChanged.emit(args);
145145
} else {
146+
const minTime = this.minValue ? this._convertMinMaxValue(this.minValue) : null;
147+
const maxTime = this.maxValue ? this._convertMinMaxValue(this.maxValue) : null;
148+
if (maxTime && value > maxTime) {
149+
this._value = maxTime;
150+
} else if (minTime && value < minTime) {
151+
this._value = minTime;
152+
}
153+
146154
const args: IgxTimePickerValidationFailedEventArgs = {
147155
timePicker: this,
148156
currentValue: value,
@@ -1112,7 +1120,7 @@ export class IgxTimePickerComponent implements
11121120
}
11131121

11141122
private _convertMinMaxValue(value: string): Date {
1115-
const date = this.value ? new Date(this.value) : this._dateFromModel ? new Date(this._dateFromModel) : new Date();
1123+
const date = this._dateFromModel ? new Date(this._dateFromModel) : this.value ? new Date(this.value) : new Date();
11161124
const sections = value.split(/[\s:]+/);
11171125
let hour, minutes, amPM;
11181126

@@ -1331,7 +1339,6 @@ export class IgxTimePickerComponent implements
13311339
// use this flag to make sure that min/maxValue are checked (in _convertMinMaxValue() method)
13321340
// against the real value when initializing the component and value is bound via ngModel
13331341
this._dateFromModel = value;
1334-
13351342
this.value = value;
13361343

13371344
if (this.mode === InteractionMode.DropDown) {

‎src/app/time-picker/time-picker.sample.html

+23-19
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,16 @@ <h4 class="sample-title">Time Picker with Dropdown</h4>
1313
</igx-time-picker>
1414
</div>
1515
</article>
16-
<article class="timepicker-column">
17-
<h4 class="sample-title">Time Picker with Dropdown Hour Mode</h4>
18-
<div class="sample-description">{{showDate(date1)}}</div>
19-
<div class="sample-description">Mask: {{hourModeTimePicker.mask}}, Format: {{hourModeTimePicker.format}}</div>
20-
<div class="preview" style="width: 200px">
21-
<igx-time-picker #hourModeTimePicker [mode]="'dropdown'" [(ngModel)]="date1" [format]="'h tt'">
22-
</igx-time-picker>
23-
</div>
24-
</article>
16+
<article class="timepicker-column">
17+
<h4 class="sample-title">Time Picker with Dropdown Hour Mode</h4>
18+
<div class="sample-description">{{showDate(date1)}}</div>
19+
<div class="sample-description">Mask: {{hourModeTimePicker.mask}}, Format: {{hourModeTimePicker.format}}
20+
</div>
21+
<div class="preview" style="width: 200px">
22+
<igx-time-picker #hourModeTimePicker [mode]="'dropdown'" [(ngModel)]="date1" [format]="'h tt'">
23+
</igx-time-picker>
24+
</div>
25+
</article>
2526
<article class="timepicker-column">
2627
<h4 class="sample-title">Horizontal Time Picker</h4>
2728
<p class="sample-description">AM/PM Time format</p>
@@ -64,15 +65,13 @@ <h4 class="sample-title">Templated Time Picker</h4>
6465
<p class="sample-description">Time picker with required input group</p>
6566
<div class="preview">
6667
<igx-time-picker #templatedTimePicker [value]="today">
67-
<ng-template igxTimePickerTemplate
68-
let-openDialog="openDialog"
69-
let-value="value">
68+
<ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value">
7069
<igx-input-group [supressInputAutofocus]="true">
7170
<label igxLabel>Required</label>
7271
<igx-prefix (click)="openDialog()">
7372
<igx-icon>access_time</igx-icon>
7473
</igx-prefix>
75-
<input igxInput [value]="showDate(value)" [required]="isRequired"/>
74+
<input igxInput [value]="showDate(value)" [required]="isRequired" />
7675
<igx-suffix igxRipple (click)="change()">
7776
<igx-icon fontSet="material">star</igx-icon>
7877
</igx-suffix>
@@ -85,10 +84,13 @@ <h4 class="sample-title">Templated Time Picker</h4>
8584
<h4 class="sample-title">Templated Time Picker</h4>
8685
<p class="sample-description">Time picker with dropdown mode</p>
8786
<div class="preview">
88-
<igx-time-picker [value]="today" [okButtonLabel]="''" [cancelButtonLabel]="''" format="HH:mm" mode="dropdown">
89-
<ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value" let-displayTime="displayTime">
87+
<igx-time-picker [value]="today" [okButtonLabel]="''" [cancelButtonLabel]="''" format="HH:mm"
88+
mode="dropdown">
89+
<ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value"
90+
let-displayTime="displayTime">
9091
<igx-input-group>
91-
<input #dropDownTarget igxInput [value]="displayTime" (blur)="onBlur(dropDownTarget.value, value)"/>
92+
<input #dropDownTarget igxInput [value]="displayTime"
93+
(blur)="onBlur(dropDownTarget.value, value)" />
9294
<igx-suffix>
9395
<igx-icon (click)="openDialog(dropDownTarget)">access_time</igx-icon>
9496
</igx-suffix>
@@ -101,10 +103,12 @@ <h4 class="sample-title">Templated Time Picker</h4>
101103
<h4 class="sample-title">Templated Time Picker</h4>
102104
<p class="sample-description">Time picker with dropdown mode + overlay settings + custom buttons</p>
103105
<div class="preview">
104-
<igx-time-picker #picker [value]="val" [overlaySettings]="myOverlaySettings" format="HH:mm" [mode]="'dropdown'">
105-
<ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value" let-displayValue="displayValue">
106+
<igx-time-picker #picker [value]="val" [overlaySettings]="myOverlaySettings" format="HH:mm:ss"
107+
[mode]="'dropdown'">
108+
<ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value"
109+
let-displayValue="displayValue">
106110
<igx-input-group>
107-
<input #target igxInput [value]="displayValue" (blur)="onBlur(target.value, value)"/>
111+
<input #target igxInput [value]="displayValue" (blur)="onBlur(target.value, value)" />
108112
<igx-suffix>
109113
<igx-icon (click)="openDialog(target)">access_time</igx-icon>
110114
</igx-suffix>

‎src/app/time-picker/time-picker.sample.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ export class TimePickerSampleComponent implements AfterViewInit {
1717
mode = InteractionMode.DropDown;
1818

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

2424
isRequired = true;
@@ -36,7 +36,7 @@ export class TimePickerSampleComponent implements AfterViewInit {
3636
public target: IgxInputDirective;
3737

3838
ngAfterViewInit() {
39-
this.myOverlaySettings.positionStrategy.settings.target = this.target.nativeElement;
39+
// this.myOverlaySettings.positionStrategy.settings.target = this.target.nativeElement;
4040
}
4141

4242
showDate(date) {

0 commit comments

Comments
 (0)