Not able to set default values to Timepicker.


Topic: Not able to set default values to Timepicker.

Revature Pro priority asked 3 years ago

Hi, I'm using a MDB Angular Pro version. I'm facing problem when setting a time from component through [(ngModel)]. Here is my code for time picker
<mdb-time-picker  [(ngModel)]="schedule.openTime"  [buttonLabel]="'Done'" [twelvehour]="true" [darktheme]="true" ></mdb-time-picker>
Please provide a solution for it. Thanks.

Damian Gemza staff answered 3 years ago

Dear sreenathb@revature.com, You have to do it in two steps. First, you have to set time picker's input value via [(ngModel)]. Then you have to use selectedHours object from Timepicker component, to set time in time picker's modal. Please check below code. html:
<mdb-time-picker #time [buttonLabel]="'Done'" [(ngModel)]="schedule.open" [twelvehour]="true" [darktheme]="false"

[placeholder]="'Selected time'" [label]="'Light

version, 12hours'" [showClock]="true"></mdb-time-picker>
ts:
@ViewChild(ClockPickerComponent) time: ClockPickerComponent;

schedule= {

hours:'08',

minutes:'00',

ampm:'AM',

open:''

};

ngAfterViewInit() {




setTimeout(() => {

this.schedule.open=this.schedule.hours+':'+this.schedule.minutes+this.schedule.ampm;

this.time.selectedHours= {

ampm:'AM',

h:'08',

m:'00'

};

}, 0);

}
Best Regards, Damian  

Revature Pro priority commented 3 years ago

Thanks for the solution. It worked.

ShadowshotSys free answered 2 years ago

This doesn't appear to work anymore. While it does update the clock, it does not update the input field.


Arkadiusz Idzikowski staff commented 2 years ago

I already answered here: https://mdbootstrap.com/support/angular/how-to-set-initial-value-of-mdb-time-picker


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
  • User: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: Desktop
  • Browser: All
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: No