Not able to set default values to Timepicker.

web
mobile

Topic: Not able to set default values to Timepicker.

sreenathb@revature.com pro asked a year 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 a year 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  

sreenathb@revature.com pro commented a year ago

Thanks for the solution. It worked.

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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 6.2.2
  • Device: Desktop
  • Browser: All
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: No