Skip to content

Commit 7c8582c

Browse files
ddariboddaribo
committed
fix(date/time editors): keep 'tt' format as alias to 'a','aa', ..
1 parent 1612051 commit 7c8582c

File tree

7 files changed

+47
-23
lines changed

7 files changed

+47
-23
lines changed

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

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -112,27 +112,37 @@ describe(`DateTimeUtil Unit tests`, () => {
112112
expect(result).toEqual(new Date(2020, 9, 31));
113113
});
114114

115-
it('should correctly parse values in h:m:s a format', () => {
115+
it('should correctly parse values in h:m:s a, aa,.. or h:m:s tt format', () => {
116116
const verifyTime = (val: Date, hours = 0, minutes = 0, seconds = 0, milliseconds = 0) => {
117117
expect(val.getHours()).toEqual(hours);
118118
expect(val.getMinutes()).toEqual(minutes);
119119
expect(val.getSeconds()).toEqual(seconds);
120120
expect(val.getMilliseconds()).toEqual(milliseconds);
121121
};
122122

123-
const parts = DateTimeUtil.parseDateTimeFormat('h:m:s a');
124-
let result = DateTimeUtil.parseValueFromMask('11:34:12 AM', parts);
125-
verifyTime(result, 11, 34, 12);
126-
result = DateTimeUtil.parseValueFromMask('04:12:15 PM', parts);
127-
verifyTime(result, 16, 12, 15);
128-
result = DateTimeUtil.parseValueFromMask('11:00:00 AM', parts);
129-
verifyTime(result, 11, 0, 0);
130-
result = DateTimeUtil.parseValueFromMask('10:00:00 PM', parts);
131-
verifyTime(result, 22, 0, 0);
132-
result = DateTimeUtil.parseValueFromMask('12:00:00 PM', parts);
133-
verifyTime(result, 12, 0, 0);
134-
result = DateTimeUtil.parseValueFromMask('12:00:00 AM', parts);
135-
verifyTime(result, 0, 0, 0);
123+
const runTestsForParts = (parts: DatePartInfo[]) => {
124+
let result = DateTimeUtil.parseValueFromMask('11:34:12 AM', parts);
125+
verifyTime(result, 11, 34, 12);
126+
result = DateTimeUtil.parseValueFromMask('04:12:15 PM', parts);
127+
verifyTime(result, 16, 12, 15);
128+
result = DateTimeUtil.parseValueFromMask('11:00:00 AM', parts);
129+
verifyTime(result, 11, 0, 0);
130+
result = DateTimeUtil.parseValueFromMask('10:00:00 PM', parts);
131+
verifyTime(result, 22, 0, 0);
132+
result = DateTimeUtil.parseValueFromMask('12:00:00 PM', parts);
133+
verifyTime(result, 12, 0, 0);
134+
result = DateTimeUtil.parseValueFromMask('12:00:00 AM', parts);
135+
verifyTime(result, 0, 0, 0);
136+
}
137+
138+
const inputFormat = 'h:m:s';
139+
let parts = DateTimeUtil.parseDateTimeFormat(`${inputFormat} tt`);
140+
runTestsForParts(parts);
141+
142+
for (let i = 0; i < 5; i++) {
143+
parts = DateTimeUtil.parseDateTimeFormat(`${inputFormat} ${'a'.repeat(i + 1)}`);
144+
runTestsForParts(parts);
145+
}
136146
});
137147
});
138148

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,11 @@ export abstract class DateTimeUtil {
6565
parts[DatePart.Hours] %= 12;
6666
}
6767

68-
if (amPm && DateTimeUtil.getCleanVal(inputData, amPm, promptChar).toLowerCase() === 'pm') {
69-
parts[DatePart.Hours] += 12;
68+
if (amPm) {
69+
const cleanVal = DateTimeUtil.getCleanVal(inputData, amPm, promptChar).toLowerCase();
70+
if (cleanVal === 'pm' || cleanVal === 'p') {
71+
parts[DatePart.Hours] += 12;
72+
}
7073
}
7174

7275
return new Date(
@@ -566,6 +569,8 @@ export abstract class DateTimeUtil {
566569
case 'S':
567570
return DatePart.Seconds;
568571
case 'a':
572+
case 't':
573+
case 'T':
569574
return DatePart.AmPm;
570575
default:
571576
return DatePart.Literal;

‎projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.spec.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -367,6 +367,15 @@ describe('IgxDateTimeEditor', () => {
367367
dateTimeEditor.inputFormat = inputFormat;
368368
expect(dateTimeEditor.mask).toEqual(expectedMask);
369369
});
370+
371+
it('should use \'tt\' format as an alias to a, aa, etc. Period formats', () => {
372+
inputFormat = 'HH:mm:ss tt';
373+
elementRef = { nativeElement: { value: inputDate } };
374+
initializeDateTimeEditor();
375+
const expectedMask = '00:00:00 LL';
376+
dateTimeEditor.inputFormat = inputFormat;
377+
expect(dateTimeEditor.mask).toEqual(expectedMask);
378+
});
370379
});
371380
});
372381

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -843,7 +843,7 @@ describe('IgxTimePicker', () => {
843843
it('should scroll trough hours/minutes/seconds/AM PM based on custom itemsDelta', fakeAsync(() => {
844844
const newDate = new Date(2021, 24, 2, 10, 20, 0);
845845
fixture.componentInstance.date = newDate;
846-
timePicker.inputFormat = 'hh:mm:ss a';
846+
timePicker.inputFormat = 'hh:mm:ss tt';
847847
timePicker.itemsDelta = { hours: 2, minutes: 20, seconds: 20 };
848848
fixture.detectChanges();
849849

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,7 @@ export class IgxTimeItemDirective {
262262
const secondsPart = inputDateParts.find(element => element.type === 'seconds');
263263
return DateTimeUtil.getPartValue(this.timePicker.selectedDate, secondsPart, secondsPart.format.length) === currentValue;
264264
case 'ampmList':
265-
const ampmPart = inputDateParts.find(element => element.format.indexOf('a') !== -1);
265+
const ampmPart = inputDateParts.find(element => element.format.indexOf('a') !== -1 || element.format === 'tt');
266266
return DateTimeUtil.getPartValue(this.timePicker.selectedDate, ampmPart, ampmPart.format.length) === this.value;
267267
}
268268
}
@@ -290,7 +290,7 @@ export class IgxTimeItemDirective {
290290
}
291291
return '00';
292292
case 'ampmList':
293-
const ampmPart = inputDateParts.find(element => element.format.indexOf('a') !== -1);
293+
const ampmPart = inputDateParts.find(element => element.format.indexOf('a') !== -1 || element.format === 'tt');
294294
return DateTimeUtil.getPartValue(this.timePicker.minDropdownValue, ampmPart, ampmPart.format.length);
295295
}
296296
}
@@ -331,7 +331,7 @@ export class IgxTimeItemDirective {
331331
return DateTimeUtil.getPartValue(date, secondsPart, secondsPart.format.length);
332332
}
333333
case 'ampmList':
334-
const ampmPart = inputDateParts.find(element => element.format.indexOf('a') !== -1);
334+
const ampmPart = inputDateParts.find(element => element.format.indexOf('a') !== -1 || element.format === 'tt');
335335
return DateTimeUtil.getPartValue(this.timePicker.maxDropdownValue, ampmPart, ampmPart.format.length);
336336
}
337337
}
@@ -355,7 +355,7 @@ export class IgxTimeItemDirective {
355355
private getHourPart(date: Date): string {
356356
const inputDateParts = DateTimeUtil.parseDateTimeFormat(this.timePicker.inputFormat);
357357
const hourPart = inputDateParts.find(element => element.type === 'hours');
358-
const ampmPart = inputDateParts.find(element =>element.format.indexOf('a') !== -1);
358+
const ampmPart = inputDateParts.find(element =>element.format.indexOf('a') !== -1 || element.format === 'tt');
359359
const hour = DateTimeUtil.getPartValue(date, hourPart, hourPart.format.length);
360360
if (ampmPart) {
361361
const ampm = DateTimeUtil.getPartValue(date, ampmPart, ampmPart.format.length);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export class TimeFormatPipe implements PipeTransform {
1313
constructor(@Inject(IGX_TIME_PICKER_COMPONENT) private timePicker: IgxTimePickerBase) { }
1414

1515
public transform(value: Date): string {
16-
const format = this.timePicker.inputFormat;
16+
const format = this.timePicker.inputFormat.replace('tt', 'aa');
1717
const datePipe = new DatePipe(this.timePicker.locale);
1818
return datePipe.transform(value, format);
1919
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ <h4 class="sample-title">Time Picker with ngModel binding</h4>
2424
<p class="sample-description">{{showDate(date1)}}</p>
2525
<div class="preview">
2626
<igx-time-picker #hourModeTimePicker #model="ngModel" [(ngModel)]="date1" [minValue]="min" [maxValue]="max"
27-
[inputFormat]="'hh:mm a'" [displayFormat]="'hh a'">
27+
[inputFormat]="'hh:mm tt'" [displayFormat]="'hh a'">
2828
<igx-hint *ngIf="model.errors?.minValue || model.errors?.maxValue">Value is outside the range.
2929
</igx-hint>
3030
</igx-time-picker>

0 commit comments

Comments
 (0)