如何为 PrimeNG p-calendar 设置默认日期和时间
How to set a default date and time to PrimeNG p-calendar
我在我的项目中包含 p-calendar
showTime="true"
:
<p-calendar formControlName="pre_check_in" [defaultDate]="defaultDate" [minDate]="dateTime" showTime="true" hourFormat="24" showButtonBar="true" required>
然后在我的 TS 文件中,我使用 setValue
将从数据库中获取的数据分配给相关的 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' ];
});
}
其他字段显示所需数据,但 p-calendar
仍为空。是否可以将 p-calendar
中的数据显示为默认日期。
已获取以显示在表单中的数据采用以下格式:
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"
希望这对您有所帮助。
在你的 TS 文件中
例如。 this.defaultDate = new Date();
在您的 HTML 文件中
例如。 <p-calendar formControlName="pre_check_in" [defaultDate]="defaultDate" [minDate]="dateTime" showTime="true" hourFormat="24" showButtonBar="true" required>
试试这个
const formattedDate=new Date(this.editCheckinData[ 'pre_check_in']);
this.editCheckinForm.controls[ 'pre_check_in' ].setValue(formattedDate);
希望这对您有用。如果您有任何问题,请告诉我。
我在我的项目中包含 p-calendar
showTime="true"
:
<p-calendar formControlName="pre_check_in" [defaultDate]="defaultDate" [minDate]="dateTime" showTime="true" hourFormat="24" showButtonBar="true" required>
然后在我的 TS 文件中,我使用 setValue
将从数据库中获取的数据分配给相关的 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' ];
});
}
其他字段显示所需数据,但 p-calendar
仍为空。是否可以将 p-calendar
中的数据显示为默认日期。
已获取以显示在表单中的数据采用以下格式:
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"
希望这对您有所帮助。
在你的 TS 文件中
例如。 this.defaultDate = new Date();
在您的 HTML 文件中
例如。 <p-calendar formControlName="pre_check_in" [defaultDate]="defaultDate" [minDate]="dateTime" showTime="true" hourFormat="24" showButtonBar="true" required>
试试这个
const formattedDate=new Date(this.editCheckinData[ 'pre_check_in']);
this.editCheckinForm.controls[ 'pre_check_in' ].setValue(formattedDate);
希望这对您有用。如果您有任何问题,请告诉我。