1

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

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

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

.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,
    });
  }
4

1 回答 1

0

你有点对基于模板的表单和基于响应式的表单感到困惑，因为你同时使用这两个表单[(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');
    }
于 2021-03-16T11:18:46.173 回答