How to set a default date and time to PrimeNG p-calendar

Question

I have included p-calendar in my project with showTime="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 the p-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:"atul.vurung@gmail.com"
creator_id:"atul.vurung@gmail.com"
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"

what do you get for this.editCheckinData[ 'pre_check_in' ] when console.log it — Suvethan Nantha, Apr 18 '18 at 06:33
@SuvethanNantha when i console log that i get `2018-04-12T04:56:20.744Z` — Atul Stha, Apr 18 '18 at 10:00

score 7 · Accepted Answer · edited Apr 18 '18 at 10:46

7

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.

edited Apr 18 '18 at 10:46

Atul Stha

1,404
8
23
46

answered Apr 18 '18 at 07:15

Suvethan Nantha

2,404
16
28

Thanks for your help, This will only works if you want to show the date in calendar. – Mandeep Singh May 08 '23 at 10:36

score 2 · Answer 2 · answered Apr 18 '18 at 06:31

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>

answered Apr 18 '18 at 06:31

Adithya

813
1
7
10

https://forum.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(); } – Prasad Shinde Aug 08 '19 at 12:46

score 0 · Answer 3 · answered Apr 13 '23 at 04:18

According to Docs: PrimeNg Calendar we can set the value using two way binding as shown in the example:

HTML File

<p-calendar [(ngModel)]="defaultDate"></p-calendar>

TS File

export class MyModel {

    defaultDate: Date;
    // or new Date() if you want to set today's date

}

And done!

How to set a default date and time to PrimeNG p-calendar

3 Answers3