Topic: Catch change on Timepicker
                  
                  marketingtech
                  priority
                  asked 1 year 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 year 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