Issue
I got a few working Angular material date pickers, but no time pickers. The version is Angular 8.
Since Angular material does not offer a time picker, I am using the ngx-material-timepicker.
I can add the time picker to the html, but I don't know how to get the selected time since the binding it to an input throws an error:
<input [ngxTimepicker]="timePicker" />
<ngx-timepicker-field
#timePicker
[format]="24"
[defaultTime]="'6:00 am'"
></ngx-timepicker-field>
The error is ERROR TypeError: "this._timepicker.registerInput is not a function."
I tried with a form field as well, but receive the same error:
<mat-form-field>
<input
matInput
[formControl]="timeFormCtrl"
[ngxTimepicker]="timePicker"
/>
<ngx-timepicker-field
#timePicker
[format]="24"
[defaultTime]="'6:00 am'"
></ngx-timepicker-field>
</mat-form-field>
Solution
I got it to work in the end, but without the ngx-timepicker-field
. I decided to use a normal ngx-timepicker
.
Here's what the template looks like:
<mat-form-field>
<mat-label>Time</mat-label>
<input
matInput
aria-label="default time"
[ngxTimepicker]="defaultValue"
[value]="'0:00 am'"
[(ngModel)]="time"
/>
<ngx-material-timepicker #defaultValue>
</ngx-material-timepicker>
</mat-form-field>
As you can see, I am not using a form control, but simple [(ngModel)]
binding to a variable called time
in my controller.
export class FeatureListComponent implements OnInit {
// [...]
time = '6:00 am'; // this shows up as default time.
Now, the time picker looks like this, which is not exactly what I wanted, but it's good enough for now:
Thanks to all the suggestions. I'm not sure why the time control field did not work in the end.
Answered By - mneumann
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.