How to set a default date and time to PrimeNG p-calendar
Solution 1
Try this
const formattedDate=new Date(this.editCheckinData[ 'pre_check_in']);
this.editCheckinForm.controls[ 'pre_check_in' ].setValue(formattedDate);
I hope this will work for you. If you have any issues let me know.
Solution 2
Hope this might help you.
In your TS File
eg. this.defaultDate = new Date();
In your HTML file
eg. <p-calendar formControlName="pre_check_in" [defaultDate]="defaultDate" [minDate]="dateTime" showTime="true" hourFormat="24" showButtonBar="true" required>
Related videos on Youtube
Atul Stha
Most people don't fail because they aim high and miss, they fail because they aim low and hit. Well I don't see anything to hit :D
Updated on June 04, 2022Comments
-
Atul Stha about 2 years
I have included
p-calendar
in my project withshowTime="true"
:<p-calendar formControlName="pre_check_in" [defaultDate]="defaultDate" [minDate]="dateTime" showTime="true" hourFormat="24" showButtonBar="true" required>
Then in my TS file i have used
setValue
to assign data fetched from database to the respected formControlls:private passService(qsUserId) { this._appService.getEditVisitData(qsUserId).subscribe((data) => { console.log(data); this.editCheckinData = data; this.editCheckinForm.controls[ 'id' ].setValue(this.editCheckinData[ 'id' ]); this.editCheckinForm.controls[ 'f_name' ].setValue(this.editCheckinData[ 'f_name' ]); this.editCheckinForm.controls[ 'l_name' ].setValue(this.editCheckinData[ 'l_name' ]); this.editCheckinForm.controls[ 'purpose' ].setValue(this.editCheckinData[ 'purpose' ]); this.editCheckinForm.controls[ 'department' ].setValue(this.editCheckinData[ 'department' ]); this.editCheckinForm.controls[ 'pre_check_in' ].setValue(this.editCheckinData[ 'pre_check_in' ]); // this.date1 = this.editCheckinData[ 'pre_check_in' ]; }); }
Other fields show the desired data but the
p-calendar
still remains empty. Is it possible to show the data in thep-calendar
as default date. The data that is been fetched to display in the form is in the following format:check_in:null checkin_status:false created_at:"2018-04-12T04:56:43.000Z" creator_email:"[email protected]" creator_id:"[email protected]" creator_mobileno:0 department:"D0001" entry_source:"admin" f_name:"erd" id:43 l_name:"erd" organization:"ORG_VURUNG" pre_check_in:"2018-04-12T04:56:20.744Z" purpose:"discuss" updated_at:"2018-04-12T04:56:43.000Z" visitor_type:"visitor"
-
Suvethan Nantha about 6 yearswhat do you get for this.editCheckinData[ 'pre_check_in' ] when console.log it
-
Atul Stha about 6 years@SuvethanNantha when i console log that i get
2018-04-12T04:56:20.744Z
-
-
Prasad Shinde almost 5 yearsforum.primefaces.org/viewtopic.php?p=176751#p176751 I can able to solve this mindate , maxdate issue in primeng calendar. I had to add localvariable and updateCalendarUI; Also I had to set minDate and MaxDate with following logic: updateCalendarUI(calendar: Calendar) { this.maxDate = new Date(); this.maxDate.setFullYear(new Date().getFullYear() - 65); this.maxDate.setMonth(new Date().getMonth()); this.minDate.setFullYear(new Date().getFullYear() - 10); this.minDate.setMonth(new Date().getMonth()); calendar.updateUI(); }