Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Catch change on Timepicker

marketingtech priority asked 3 months 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 3 months 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;
  }


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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