search

Agranom / ngx-material-timepicker

Material desing timepicker for Angular 6.0+
https://agranom.github.io/ngx-material-timepicker/
MIT License
340 stars 140 forks source link

Not working on Edge browser #424

Open TarnjeetIron opened 1 year ago

TarnjeetIron commented 1 year ago

I tried to use min and max value example (ngx-timepicker-field) but its not working on Edge browser on window platform. Its also not working for your demo in Edge browser. https://agranom.github.io/ngx-material-timepicker/

nikheelneelay commented 1 year ago

Same issue for me, time picker is not working on edge but works fine in chrome

jamesmikesell commented 1 year ago

This can be worked around (read: hacked) by not using the [ngxTimepicker] directive on the input you're displaying, and instead manually getting and processing the time. A hidden input such as <input [ngxTimepicker]="timePicker" hidden> is however necessary because without attaching the <ngx-material-timepicker ...> to an <input> component, 'PM' values were returning as 'AM'.

Example Implementation

your.component.html

<input [ngxTimepicker]="timePicker" hidden>
<input matInput [(ngModel)]="onlyTimeString" (click)="timePicker.open()" />
<ngx-material-timepicker #timePicker (timeSet)="timeSet($event)"
[defaultTime]="onlyTimeString"></ngx-material-timepicker>

your.component.ts


onlyTimeString: string;

timeSet(time: string): void { this.onlyTimeString = time.replace(/\u202f/g, " "); }



For whatever reason, Edge returns a time with the character `U+202f` instead of a space between the time part and the AM/PM. `U+202f` looks like a space when output to the console, which was fun to diagnose...
agiratech-nikkel commented 1 year ago

This can be worked around (read: hacked) by not using the [ngxTimepicker] directive on the input you're displaying, and instead manually getting and processing the time. A hidden input such as <input [ngxTimepicker]="timePicker" hidden> is however necessary because without attaching the <ngx-material-timepicker ...> to an <input> component, 'PM' values were returning as 'AM'.

Example Implementation

your.component.html

<input [ngxTimepicker]="timePicker" hidden>
<input matInput [(ngModel)]="onlyTimeString" (click)="timePicker.open()" />
<ngx-material-timepicker #timePicker (timeSet)="timeSet($event)"
  [defaultTime]="onlyTimeString"></ngx-material-timepicker>

your.component.ts

  onlyTimeString: string;

  timeSet(time: string): void {
    this.onlyTimeString = time.replace(/\u202f/g, " ");
  }

For whatever reason, Edge returns a time with the character U+202f instead of a space between the time part and the AM/PM. U+202f looks like a space when output to the console, which was fun to diagnose...

it's working fine for me

Agranom commented 1 year ago

Can you check it with the new version? It should be fixed