Topic: How to set initial value of mdb-time-picker

ShadowshotSys free asked 4 years ago

Expected behavior When a value is specified, the clock starts at that position (eg '07:00' should have the hands on 7 and 00 respectively)

I'm specifying my NgModel as a string. Perhaps I'm using the wrong datatype?

Actual behavior No matter what value is specified in NgModel, the clock always starts at 12:00AM. After using the clock to set the value, it persists.

Resources (screenshots, code snippets etc.)


<mdb-time-picker [buttonLabel]="'Done'" [twelvehour]="true" [darktheme]="false" [label]="'Clock In'" [showClock]="false" [ngModel]="clockIn" (timeChanged)="clockIn_changed($event)"></mdb-time-picker>


private _clockIn = '07:00';

public get clockIn()
    return this._clockIn;

public set(value) {
    this._clockIn = value;

clockIn_changed(e) {

Arkadiusz Idzikowski staff commented 4 years ago

You added the default date correctly, it looks like a bug. We will take a closer look at that and fix that as soon as possible.

After picking the date manually, you need to click 'done' button to confirm. Only then the picker value will be updated.

ShadowshotSys free answered 4 years ago

this solved my problem

using writeValue instead of selectedHours

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.7.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No