Switching format from 12h to 24h leads to error on picker

[yl-endress]

Hey guys,

whenever I changed the current format type from 12h to 24h, the picker leads to an error when going > 12 or < 1.

Details
The form starts in the 12h format (hoursFormat=12).
Depending on format settings it's dynamically changed.

<ngx-timepicker-field [defaultTime]="currentTimeControl.value" [formControl]="currentTimeControl" [format]="hoursFormat" [toggleIcon]="timePickerIcon"> </ngx-timepicker-field> <ng-template #timePickerIcon> <span class="my-icon"></span> </ng-template>

Debugging with Augury let me observe, that the amount of available hours is not updated. Initially the array hoursList is an array of 12 elements.

After changing the format, the array is not updated.

I expected the hourList is updated properly on it's own whenever the format is changed (like max. hours does).

[Agranom]

Hi. I know about that bug. I've just thought that it's not so neccessary, but I see, that it becames more useful feature. So I'll add possibility to change format dynamically.

[Agranom]

how do you change format? Because I cannot reproduce that bug. Hours list changes as expected

[yl-endress]

<ngx-timepicker-field [defaultTime]="currentTimeControl.value" [formControl]="currentTimeControl" [format]="hoursFormat" [toggleIcon]="timePickerIcon">

ts part
export class MyComponent {
hoursFormat = 24;

private setHoursFormat(timeFormat: string) {
this.hoursFormat = timeFormat.includes("a") ? 12 : 24;
}
}

Sorry I forgot to mention that I am forced to use version 3.3.1 cause of compiler issue:

WARNING in ./node_modules/ngx-material-timepicker/fesm5/ngx-material-timepicker.js 230:51-69
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/ngx-material-timepicker/fesm5/ngx-material-timepicker.js 289:56-74
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

[yl-endress]

Somehow it looks like the function getHours() is not executed properly @my place.

@Input() set format(value: number) { this._format = value === 24 ? 24 : 12; this.minHour = this._format === 12 ? 1 : 0; this.maxHour = this._format === 12 ? 12 : 23; this.hoursList = getHours(this._format); }

I copy pasted it to my ts and call it manually.... now it seems to work... I have no idea why it's behaving as it does, because the namespace should not be a problem (getHours shouldn't be overwritten)....

ts part
export class MyComponent {
@ViewChild("timePickerField") timePickerField;

private setHoursFormat(timeFormat: string) {
this.hoursFormat = timeFormat.includes("a") ? 12 : 24;
if (this.timePickerField) {
this.timePickerField.format = this.hoursFormat;
this.timePickerField.hoursList = this.getHours(this.hoursFormat);
console.log(this.timePickerField);
console.log(this.getHours(12));
console.log(this.getHours(24));
debugger;
}
}

private getHours(format: number): ClockFaceTime[] {
return Array(format).fill(1).map((v, i) => {
const angleStep = 30;
const time = v + i;
const angle = angleStep * time;
return {time: time === 24 ? 0 : time, angle};
});
}

Can you please put the utils functions into your public api ? So I can reuse them :-)

[Agranom]

Already figured out the issue. Will be fixed soon

[Agranom]

You can try it now. But you have to use the latest version which is now v5.1.0

[yl-endress]

Thank you!

Unfortunately I am not able to test it because we still use Angular 7, that leads to compiler errors (ng s will lead to empty white screen)

WARNING in ./node_modules/ngx-material-timepicker/fesm5/ngx-material-timepicker.js 238:51-69
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/ngx-material-timepicker/fesm5/ngx-material-timepicker.js 297:56-74
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/ngx-material-timepicker/fesm5/ngx-material-timepicker.js 323:33-51
"export 'ɵɵdefineInjectable' was not found in '@angular/core'

WARNING in ./node_modules/ngx-material-timepicker/fesm5/ngx-material-timepicker.js 323:117-125
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/ngx-material-timepicker/fesm5/ngx-material-timepicker.js 323:153-161
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/ngx-material-timepicker/fesm5/ngx-material-timepicker.js 323:179-187
"export 'ɵɵinject' was not found in '@angular/core'

WARNING in ./node_modules/ngx-material-timepicker/fesm5/ngx-material-timepicker.js 323:199-207
"export 'ɵɵinject' was not found in '@angular/core'
i ｢wdm｣: Compiled with warnings.

=> I have to wait until we updated to 8.x . So far I simply trust in your development ;)