如何使用primeng组件在数据库中传递日历格式值？

问题描述

我创建了一个 .html 和 .ts 文件（代码如下），我使用了primeng 组件来设置日历，我从日历中获取数据的值为 {Sat Mar 16 2021 10:58: 55 GMT+0530（印度标准时间）}，但我需要通过 formbuilder 传递数据库中的日期时间值。

问题：如何将日历日期和时间值传递/发送到数据库到 StartDate？

我还使用 datepipe 将给定的数据转换为所需的日期和时间格式。

.html 文件

<div class="col-md-6">
     <label class="form-label">Start Date</label>
         <div class="form-control-wrap">
            <p-calendar [(ngModel)]="date_val" formControlName="StartDate" name="StartDate"                                 [showTime]="true" hourFormat="24" inputId="time" dateFormat="yy-mm-dd"></p-calendar>
         </div>
</div>

我要了

import { DatePipe } from '@angular/common';
export class CreateEventComponent implements OnInit {
  date_val!: Date;

  constructor(private formBuilder: FormBuilder,private auth: AuthService,private route: Router) { 
      this.form = this.formBuilder.group({
      });
   }


  ngOnInit(): void {
    var start_date =this.datepipe.transform(this.date_val,'yyyy-MM-dd');
    this.currentUser = JSON.parse(localStorage.getItem('current_user') || '{}');

    this.createEventForm = this.formBuilder.group({
      EventName: [''],EventType: [''],HostUserEmail: this.currentUser.email,StartDate: this.start_date,});
  }

解决方法

由于您将 [(ngModel)] 和 formControlName 用于同一字段，因此您对基于模板的表单和基于反应的表单有点困惑。您只能使用一种或另一种。

首先像这样修改您的字段：

<p-calendar formControlName="StartDate" name="StartDate" [showTime]="true" hourFormat="24" inputId="time" dateFormat="yy-mm-dd"></p-calendar>

您还尝试在日期进入日历库之前对其进行格式化，但是您需要将其保留为日期对象。我会执行以下操作（假设您想要今天的日期）：

ngOnInit(): void {
    
    this.currentUser = JSON.parse(localStorage.getItem('current_user') || '{}');

    this.createEventForm = this.formBuilder.group({
      EventName: [''],EventType: [''],HostUserEmail: this.currentUser.email,StartDate: [new Date],});
  }

但是，您确实需要在将日期发送到 api 时对其进行格式化。根据 api 的期望，格式可能会有很大差异。如果您的 api 需要 yyyy-MM-dd 格式，那么我会尝试使用您的保存方法：

 save(model)
    {
let wholeObject = model.value;
wholeObject.StartDate = this.datepipe.transform(wholeObject.StartDate,'yyyy-MM-dd');
    }