Not able to set default values to Timepicker.

Topic: Not able to set default values to Timepicker.

Revature Pro priority asked 6 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.

Add comment

Damian Gemza staff answered 6 years ago

1 0 Best answer

Please insert min. 20 characters.

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 6 years ago

Thanks for the solution. It worked.

Add comment

ShadowshotSys free answered 5 years ago