Skip to content

Commit f88163a

Browse files
valadzhovvaladzhov
committed
fix(time-picker): Code refactoring. #3978 
1 parent 4047741 commit f88163a

File tree

3 files changed

+79
-136
lines changed

3 files changed

+79
-136
lines changed

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

+4-17
Original file line numberDiff line numberDiff line change
@@ -62,35 +62,22 @@ <h2 class="igx-time-picker__header-hour">
6262
<div class="igx-time-picker__body">
6363
<div *ngIf="showHoursList" #hourList [igxItemList]="'hourList'">
6464
<span [igxHourItem]="hour"
65-
[minValueDate]="convertMinMaxValue(minValue)"
66-
[maxValueDate]="convertMinMaxValue(maxValue)"
67-
[selectedAmPm]="selectedAmPm"
65+
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForHours(hour)}"
6866
*ngFor="let hour of hourView">{{ hour }}</span>
6967
</div>
7068
<div *ngIf="showMinutesList" #minuteList [igxItemList]="'minuteList'">
7169
<span [igxMinuteItem]="minute"
72-
[minValueDate]="convertMinMaxValue(minValue)"
73-
[maxValueDate]="convertMinMaxValue(maxValue)"
74-
[selectedHour]="selectedHour"
75-
[selectedAmPm]="selectedAmPm"
70+
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForMinutes(minute)}"
7671
*ngFor="let minute of minuteView" >{{ minute }}</span>
7772
</div>
7873
<div *ngIf="showSecondsList" #secondsList [igxItemList]="'secondsList'">
7974
<span [igxSecondsItem]="seconds"
80-
[minValueDate]="convertMinMaxValue(minValue)"
81-
[maxValueDate]="convertMinMaxValue(maxValue)"
82-
[selectedHour]="selectedHour"
83-
[selectedMinute]="selectedMinute"
84-
[selectedAmPm]="selectedAmPm"
75+
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForSeconds(seconds)}"
8576
*ngFor="let seconds of secondsView">{{ seconds }}</span>
8677
</div>
8778
<div *ngIf="showAmPmList" #ampmList [igxItemList]="'ampmList'">
8879
<span [igxAmPmItem]="ampm"
89-
[minValueDate]="convertMinMaxValue(minValue)"
90-
[maxValueDate]="convertMinMaxValue(maxValue)"
91-
[selectedHour]="selectedHour"
92-
[selectedMinute]="selectedMinute"
93-
[selectedSecond]="selectedSeconds"
80+
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForAmPm(ampm)}"
9481
*ngFor="let ampm of ampmView">{{ ampm }}</span>
9582
</div>
9683
</div>

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

+75
Original file line numberDiff line numberDiff line change
@@ -635,6 +635,81 @@ export class IgxTimePickerComponent implements
635635
}
636636
}
637637

638+
/** @hidden @internal */
639+
applyDisabledStyleForHours(hourString: string): boolean {
640+
const minValueDate: Date = this.convertMinMaxValue(this.minValue)
641+
const maxValueDate: Date = this.convertMinMaxValue(this.maxValue)
642+
if (!minValueDate || !maxValueDate) {
643+
return false;
644+
}
645+
let hour = parseInt(hourString, 10);
646+
if (this.selectedAmPm === 'PM') {
647+
hour += 12;
648+
}
649+
const date = new Date(minValueDate);
650+
date.setHours(hour);
651+
return date < minValueDate || date > maxValueDate;
652+
}
653+
654+
/** @hidden @internal */
655+
applyDisabledStyleForMinutes(minuteString: string): boolean {
656+
const minValueDate: Date = this.convertMinMaxValue(this.minValue)
657+
const maxValueDate: Date = this.convertMinMaxValue(this.maxValue)
658+
if (!minValueDate || !maxValueDate) {
659+
return false;
660+
}
661+
const minute = parseInt(minuteString, 10);
662+
let hour = parseInt(this.selectedHour, 10);
663+
if (this.selectedAmPm === 'PM') {
664+
hour += 12;
665+
}
666+
const date = new Date(minValueDate);
667+
date.setHours(hour);
668+
date.setMinutes(minute);
669+
return date < minValueDate || date > maxValueDate;
670+
}
671+
672+
/** @hidden @internal */
673+
applyDisabledStyleForSeconds(secondsString: string): boolean {
674+
const minValueDate: Date = this.convertMinMaxValue(this.minValue)
675+
const maxValueDate: Date = this.convertMinMaxValue(this.maxValue)
676+
if (!minValueDate || !maxValueDate) {
677+
return false;
678+
}
679+
const minute = parseInt(this.selectedMinute, 10);
680+
let hour = parseInt(this.selectedHour, 10);
681+
const second = parseInt(secondsString, 10);
682+
if (this.selectedAmPm === 'PM') {
683+
hour += 12;
684+
}
685+
const date = new Date(minValueDate);
686+
date.setHours(hour);
687+
date.setMinutes(minute);
688+
date.setSeconds(second);
689+
return date < minValueDate || date > maxValueDate;
690+
}
691+
692+
/** @hidden @internal */
693+
applyDisabledStyleForAmPm(selectedAmPm): boolean {
694+
const minValueDate: Date = this.convertMinMaxValue(this.minValue)
695+
const maxValueDate: Date = this.convertMinMaxValue(this.maxValue)
696+
if (!minValueDate || !maxValueDate) {
697+
return false;
698+
}
699+
const minute = parseInt(this.selectedMinute, 10);
700+
let hour = parseInt(this.selectedHour, 10);
701+
const second = parseInt(this.selectedSeconds, 10);
702+
const amPM = selectedAmPm;
703+
if (amPM === 'PM') {
704+
hour += 12;
705+
}
706+
const date = new Date(minValueDate);
707+
date.setHours(hour);
708+
date.setMinutes(minute);
709+
date.setSeconds(second);
710+
return date < minValueDate || date > maxValueDate;
711+
}
712+
638713
/** @hidden @internal */
639714
public registerOnChange(fn: (_: Date) => void) { this._onChangeCallback = fn; }
640715

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

-119
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
} from '@angular/core';
1515
import { IGX_TIME_PICKER_COMPONENT, IgxTimePickerBase } from './time-picker.common';
1616
import { InteractionMode } from '../core/enums';
17-
import { DatePickerUtil } from '../date-picker/date-picker.utils';
1817

1918
/** @hidden */
2019
@Directive({
@@ -243,15 +242,6 @@ export class IgxHourItemDirective {
243242
@Input('igxHourItem')
244243
public value: string;
245244

246-
@Input('minValueDate')
247-
public minValueDate: Date;
248-
249-
@Input('maxValueDate')
250-
public maxValueDate: Date;
251-
252-
@Input('selectedAmPm')
253-
public selectedAmPm: string;
254-
255245
@HostBinding('class.igx-time-picker__item')
256246
get defaultCSS(): boolean {
257247
return true;
@@ -267,20 +257,6 @@ export class IgxHourItemDirective {
267257
return this.isSelectedHour && this.itemList.isActive;
268258
}
269259

270-
@HostBinding('class.igx-time-picker__item--disabled')
271-
get applyDisabledStyleForHours(): boolean {
272-
if (!this.minValueDate || !this.maxValueDate) {
273-
return false;
274-
}
275-
let hour = parseInt(this.value, 10);
276-
if (this.selectedAmPm === 'PM') {
277-
hour += 12;
278-
}
279-
const date = new Date(this.minValueDate);
280-
date.setHours(hour);
281-
return (DatePickerUtil.lessThanMinValue(date, this.minValueDate) || DatePickerUtil.greaterThanMaxValue(date, this.maxValueDate));
282-
}
283-
284260
get isSelectedHour(): boolean {
285261
return this.timePicker.selectedHour === this.value;
286262
}
@@ -308,18 +284,6 @@ export class IgxMinuteItemDirective {
308284
@Input('igxMinuteItem')
309285
public value: string;
310286

311-
@Input('selectedHour')
312-
public selectedHour: string;
313-
314-
@Input('minValueDate')
315-
public minValueDate: Date;
316-
317-
@Input('maxValueDate')
318-
public maxValueDate: Date;
319-
320-
@Input('selectedAmPm')
321-
public selectedAmPm: string;
322-
323287
@HostBinding('class.igx-time-picker__item')
324288
get defaultCSS(): boolean {
325289
return true;
@@ -335,22 +299,6 @@ export class IgxMinuteItemDirective {
335299
return this.isSelectedMinute && this.itemList.isActive;
336300
}
337301

338-
@HostBinding('class.igx-time-picker__item--disabled')
339-
get applyDisabledStyleForMinutes(): boolean {
340-
if (!this.minValueDate || !this.maxValueDate) {
341-
return false;
342-
}
343-
const minute = parseInt(this.value, 10);
344-
let hour = parseInt(this.selectedHour, 10);
345-
if (this.selectedAmPm === 'PM') {
346-
hour += 12;
347-
}
348-
const date = new Date(this.minValueDate);
349-
date.setHours(hour);
350-
date.setMinutes(minute);
351-
return (DatePickerUtil.lessThanMinValue(date, this.minValueDate) || DatePickerUtil.greaterThanMaxValue(date, this.maxValueDate));
352-
}
353-
354302
get isSelectedMinute(): boolean {
355303
return this.timePicker.selectedMinute === this.value;
356304
}
@@ -378,21 +326,6 @@ export class IgxSecondsItemDirective {
378326
@Input('igxSecondsItem')
379327
public value: string;
380328

381-
@Input('selectedHour')
382-
public selectedHour: string;
383-
384-
@Input('selectedMinute')
385-
public selectedMinute: string;
386-
387-
@Input('minValueDate')
388-
public minValueDate: Date;
389-
390-
@Input('maxValueDate')
391-
public maxValueDate: Date;
392-
393-
@Input('selectedAmPm')
394-
public selectedAmPm: string;
395-
396329
@HostBinding('class.igx-time-picker__item')
397330
get defaultCSS(): boolean {
398331
return true;
@@ -408,24 +341,6 @@ export class IgxSecondsItemDirective {
408341
return this.isSelectedSeconds && this.itemList.isActive;
409342
}
410343

411-
@HostBinding('class.igx-time-picker__item--disabled')
412-
get applyDisabledStyleForSeconds(): boolean {
413-
if (!this.minValueDate || !this.maxValueDate) {
414-
return false;
415-
}
416-
const minute = parseInt(this.selectedMinute, 10);
417-
let hour = parseInt(this.selectedHour, 10);
418-
const second = parseInt(this.value, 10);
419-
if (this.selectedAmPm === 'PM') {
420-
hour += 12;
421-
}
422-
const date = new Date(this.minValueDate);
423-
date.setHours(hour);
424-
date.setMinutes(minute);
425-
date.setSeconds(second);
426-
return (DatePickerUtil.lessThanMinValue(date, this.minValueDate) || DatePickerUtil.greaterThanMaxValue(date, this.maxValueDate));
427-
}
428-
429344
get isSelectedSeconds(): boolean {
430345
return this.timePicker.selectedSeconds === this.value;
431346
}
@@ -453,21 +368,6 @@ export class IgxAmPmItemDirective {
453368
@Input('igxAmPmItem')
454369
public value: string;
455370

456-
@Input('selectedHour')
457-
public selectedHour: string;
458-
459-
@Input('selectedMinute')
460-
public selectedMinute: string;
461-
462-
@Input('selectedSecond')
463-
public selectedSecond: string;
464-
465-
@Input('minValueDate')
466-
public minValueDate: Date;
467-
468-
@Input('maxValueDate')
469-
public maxValueDate: Date;
470-
471371
@HostBinding('class.igx-time-picker__item')
472372
get defaultCSS(): boolean {
473373
return true;
@@ -483,25 +383,6 @@ export class IgxAmPmItemDirective {
483383
return this.isSelectedAmPm && this.itemList.isActive;
484384
}
485385

486-
@HostBinding('class.igx-time-picker__item--disabled')
487-
get applyDisabledStyleForAmPm(): boolean {
488-
if (!this.minValueDate || !this.maxValueDate) {
489-
return false;
490-
}
491-
const minute = parseInt(this.selectedMinute, 10);
492-
let hour = parseInt(this.selectedHour, 10);
493-
const second = parseInt(this.selectedSecond, 10);
494-
const amPM = this.value;
495-
if (amPM === 'PM') {
496-
hour += 12;
497-
}
498-
const date = new Date(this.minValueDate);
499-
date.setHours(hour);
500-
date.setMinutes(minute);
501-
date.setSeconds(second);
502-
return (DatePickerUtil.lessThanMinValue(date, this.minValueDate) || DatePickerUtil.greaterThanMaxValue(date, this.maxValueDate));
503-
}
504-
505386
get isSelectedAmPm(): boolean {
506387
return this.timePicker.selectedAmPm === this.value;
507388
}

0 commit comments

Comments
 (0)