Skip to content

Commit e155b2e

Browse files
PlamenaMitevaPlamenaMiteva
committed
refactor(time-picker): incorporate ISO format implementation #6482 
1 parent eab163d commit e155b2e

File tree

5 files changed

+230
-394
lines changed

5 files changed

+230
-394
lines changed

‎projects/igniteui-angular/src/lib/date-common/util/date-time.util.ts

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const enum DateParts {
2323
/** @hidden */
2424
export abstract class DateTimeUtil {
2525
public static readonly DEFAULT_INPUT_FORMAT = 'MM/dd/yyyy';
26+
public static readonly DEFAULT_TIME_INPUT_FORMAT = 'hh:mm tt';
2627
private static readonly SEPARATOR = 'literal';
2728
private static readonly DEFAULT_LOCALE = 'en';
2829

@@ -359,6 +360,7 @@ export abstract class DateTimeUtil {
359360
const format = timePart.replace(/\d/g, '0');
360361
timePart = new MaskParsingService().replaceInMask(timePart, value,
361362
{ format, promptChar: '' }, 0, value.length).value;
363+
timePart = timePart.substr(0, timePart.length - 1);
362364
return new Date(`${datePart}T${timePart}`);
363365
}
364366

@@ -426,6 +428,66 @@ export abstract class DateTimeUtil {
426428
console.warn('Using default browser locale settings.');
427429
}
428430

431+
public static getPartValue(value: Date, datePartInfo: DatePartInfo, partLength: number): string {
432+
let maskedValue;
433+
const datePart = datePartInfo.type;
434+
switch (datePart) {
435+
case DatePart.Date:
436+
maskedValue = value.getDate();
437+
break;
438+
case DatePart.Month:
439+
// months are zero based
440+
maskedValue = value.getMonth() + 1;
441+
break;
442+
case DatePart.Year:
443+
if (partLength === 2) {
444+
maskedValue = this.prependValue(
445+
parseInt(value.getFullYear().toString().slice(-2), 10), partLength, '0');
446+
} else {
447+
maskedValue = value.getFullYear();
448+
}
449+
break;
450+
case DatePart.Hours:
451+
if (datePartInfo.format.indexOf('h') !== -1) {
452+
maskedValue = this.prependValue(
453+
this.toTwelveHourFormat(value.getHours().toString()), partLength, '0');
454+
} else {
455+
maskedValue = value.getHours();
456+
}
457+
break;
458+
case DatePart.Minutes:
459+
maskedValue = value.getMinutes();
460+
break;
461+
case DatePart.Seconds:
462+
maskedValue = value.getSeconds();
463+
break;
464+
case DatePart.AmPm:
465+
maskedValue = value.getHours() >= 12 ? 'PM' : 'AM';
466+
break;
467+
}
468+
469+
if (datePartInfo.type !== DatePart.AmPm) {
470+
return this.prependValue(maskedValue, partLength, '0');
471+
}
472+
473+
return maskedValue;
474+
}
475+
476+
private static prependValue(value: number, partLength: number, prependChar: string): string {
477+
return (prependChar + value.toString()).slice(-partLength);
478+
}
479+
480+
private static toTwelveHourFormat(value: string, promptChar = '_'): number {
481+
let hour = parseInt(value.replace(new RegExp(promptChar, 'g'), '0'), 10);
482+
if (hour > 12) {
483+
hour -= 12;
484+
} else if (hour === 0) {
485+
hour = 12;
486+
}
487+
488+
return hour;
489+
}
490+
429491
private static ensureLeadingZero(part: DatePartInfo) {
430492
switch (part.type) {
431493
case DatePart.Date:

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

Lines changed: 0 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -710,66 +710,6 @@ export abstract class DatePickerUtil {
710710
console.warn('Using default browser locale settings.');
711711
}
712712

713-
public static getPartValue(value: Date, datePartInfo: DatePartInfo, partLength: number): string {
714-
let maskedValue;
715-
const datePart = datePartInfo.type;
716-
switch (datePart) {
717-
case DatePart.Date:
718-
maskedValue = value.getDate();
719-
break;
720-
case DatePart.Month:
721-
// months are zero based
722-
maskedValue = value.getMonth() + 1;
723-
break;
724-
case DatePart.Year:
725-
if (partLength === 2) {
726-
maskedValue = this.prependValue(
727-
parseInt(value.getFullYear().toString().slice(-2), 10), partLength, '0');
728-
} else {
729-
maskedValue = value.getFullYear();
730-
}
731-
break;
732-
case DatePart.Hours:
733-
if (datePartInfo.format.indexOf('h') !== -1) {
734-
maskedValue = this.prependValue(
735-
this.toTwelveHourFormat(value.getHours().toString()), partLength, '0');
736-
} else {
737-
maskedValue = value.getHours();
738-
}
739-
break;
740-
case DatePart.Minutes:
741-
maskedValue = value.getMinutes();
742-
break;
743-
case DatePart.Seconds:
744-
maskedValue = value.getSeconds();
745-
break;
746-
case DatePart.AmPm:
747-
maskedValue = value.getHours() >= 12 ? 'PM' : 'AM';
748-
break;
749-
}
750-
751-
if (datePartInfo.type !== DatePart.AmPm) {
752-
return this.prependValue(maskedValue, partLength, '0');
753-
}
754-
755-
return maskedValue;
756-
}
757-
758-
private static prependValue(value: number, partLength: number, prependChar: string): string {
759-
return (prependChar + value.toString()).slice(-partLength);
760-
}
761-
762-
private static toTwelveHourFormat(value: string, promptChar = '_'): number {
763-
let hour = parseInt(value.replace(new RegExp(promptChar, 'g'), '0'), 10);
764-
if (hour > 12) {
765-
hour -= 12;
766-
} else if (hour === 0) {
767-
hour = 12;
768-
}
769-
770-
return hour;
771-
}
772-
773713
private static ensureLeadingZero(part: DatePartInfo) {
774714
switch (part.type) {
775715
case DatePart.Date:

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

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- [preventSpinOnWheel]="!this.isDropdown" -->
22
<igx-input-group [suppressInputAutofocus]="this.isDropdown" (click)="!this.isDropdown && this.open()">
33
<input igxInput [igxDateTimeEditor]="this.inputFormat" type="text" [readonly]="!this.isDropdown"
4-
[disabled]="this.disabled" [displayFormat]="this.displayFormat" [spinDelta]="this.itemsDelta"
4+
[spinDelta]="this.spinDelta" [disabled]="this.disabled" [displayFormat]="this.displayFormat"
55
[placeholder]="this.placeholder" role="combobox" aria-haspopup="dialog"
66
[attr.aria-expanded]="!this.toggleDirective.collapsed" [attr.aria-labelledby]="this.label?.id" />
77

@@ -61,24 +61,16 @@ <h2 class="igx-time-picker__header-hour">
6161
<div class="igx-time-picker__main">
6262
<div class="igx-time-picker__body">
6363
<div *ngIf="this.showHoursList" #hourList [igxItemList]="'hourList'">
64-
<span [igxTimeItem]="hour"
65-
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem('hour', hour)}"
66-
*ngFor="let hour of hourView">{{ hour }}</span>
64+
<span [igxTimeItem]="hour" *ngFor="let hour of hourView">{{ hour }}</span>
6765
</div>
6866
<div *ngIf="this.showMinutesList" #minuteList [igxItemList]="'minuteList'">
69-
<span [igxTimeItem]="minute"
70-
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem('minute', minute)}"
71-
*ngFor="let minute of minuteView">{{ minute }}</span>
67+
<span [igxTimeItem]="minute" *ngFor="let minute of minuteView">{{ minute }}</span>
7268
</div>
7369
<div *ngIf="this.showSecondsList" #secondsList [igxItemList]="'secondsList'">
74-
<span [igxTimeItem]="seconds"
75-
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem('second', seconds)}"
76-
*ngFor="let seconds of secondsView">{{ seconds }}</span>
70+
<span [igxTimeItem]="seconds" *ngFor="let seconds of secondsView">{{ seconds }}</span>
7771
</div>
7872
<div *ngIf="this.showAmPmList" #ampmList [igxItemList]="'ampmList'">
79-
<span [igxTimeItem]="ampm"
80-
[ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem('ampm', ampm)}"
81-
*ngFor="let ampm of ampmView">{{ ampm }}</span>
73+
<span [igxTimeItem]="ampm" *ngFor="let ampm of ampmView">{{ ampm }}</span>
8274
</div>
8375
</div>
8476
<ng-container

0 commit comments

Comments
 (0)