Topic: Catch change on Timepicker
marketingtech priority asked 1 month ago
Expected behavior Able to use Timepicker with either ngModel or TimeChange event.
Actual behavior I'm trying to implement timepicker but I can't find how to use ngModel. I tried to use timeChange event but it's only triggered when clicking on OK button and not when changing values.
Resources (screenshots, code snippets etc.)
Rafał Seifert free answered 1 month ago
I present you an example how to use ngModel with timepicker. Regarding TimeChange event: it looks like we are not handling every time change event correctly. Could you precise on what actions did you expect the timeChange event to fire?
template:
<section class="border p-4 d-flex gap-5 justify-content-center mb-4">
<mdb-form-control>
<input
mdbInput
type="text"
id="form1"
class="form-control"
[mdbTimepicker]="timepicker"
[(ngModel)]="timeValue"
required
/>
<label mdbLabel class="form-label" for="form1">Example label</label>
<mdb-timepicker-toggle [mdbTimepickerToggle]="timepicker"></mdb-timepicker-toggle>
<mdb-timepicker #timepicker (timeChange)="onTimeChange($event)"></mdb-timepicker>
</mdb-form-control>
<button class="btn btn-sm" (click)="setTimeValue('02:02 AM')">02:02 AM</button>
<button class="btn btn-sm" (click)="setTimeValue('07:42 AM')">07:42 AM</button>
</section>etTimeValue('07:42 AM')">07:42 AM</button>
Component's class:
export class TimePickerComponent {
timeValue: string;
setTimeValue(time: string) {
this.timeValue = time;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 1.1.0
- Device: ThinkPad
- Browser: Chrome
- OS: Windows 11
- Provided sample code: No
- Provided link: No