如何使用 Angular 7 更改 formGroups 输入元素的日期格式？

Question

当输入类型为 'Date' 时，日期格式为 dd/MM/yyyy。
我想将日期格式从 MM/dd/yyyy 更改为 dd/MM/yyyy（土耳其语格式和土耳其日历）。

这是代码。

<form [formGroup]="opportunityForm" (ngSubmit)="updateData(opportunityForm.value)">
 <div class="form-group">
          <label>Oluşturulma Tarihi</label>
          <input  type="date"  class="form-control"  formControlName="createDate" required>
          <div class="alert-danger" *ngIf="!opportunityForm.controls['createDate'].valid && (opportunityForm.controls['createDate'].touched)">
            <div [hidden]="!opportunityForm.controls['createDate'].errors.required">
              Tarih alanı gerekli
            </div>
          </div>
        </div>
 <button type="submit" class="btn btn-primary" [disabled]="!opportunityForm.valid">Güncelle</button>
</form>



constructor(private http: HttpClient,private fb: FormBuilder,private router: Router,private actRoute: ActivatedRoute, private service:OpportunityService) {
    this.opportunityForm=this.fb.group({
      title:['',Validators.required],
      description:['',Validators.required],
      createDate:['',Validators.required],
      expirationDate:['',Validators.required],
      file: new FormControl(null)  
    });

建议和解决方案将不胜感激。

Answer 1

您可以操作您的 formControl 字段 'createDate'。

使用 angular 提供的 DatePipe 以任何需要的格式更改日期。

首先，在组件的 ts 中导入 DatePipe：

import { DatePipe } from '@angular/common';

在提供者数组中注入日期管道：

styleUrls: ['component.css'];
providers: [DatePipe] // like this you inject pipe,services

在构造函数中声明：

 constructor(
    private datePipe: DatePipe
  ) { }

你可以制作一个操作日期的函数；只需调用 updateData(formValue) 或直接在 updateData(formValue) 方法

中操作日期

// 使用 DatePipe 进行日期操作

const datePipe = this.datePipe.transform(this.opportunityForm.get('createDate').value, 'dd-MM-yyyy')

Answer 2

有多种方法可以做到这一点，但是你能解释一下你是否想在 html 中更改格式吗？如果不是，我建议您使用 formatDate 而不是 datePipe，我认为这更容易。

在您的 .ts 文件中执行此操作。

import { formatDate } from '@angular/common';
 this.opportunityForm.value.createDate = formatDate(this.opportunityForm.value.createDate, 'yyyy/MM/dd', 'en');
 // 'yyyy/MM/dd' format can be replaced with however you want to

Answer 3

我使用 DatePipe 解决了这个问题，以便在后端制作我想要的格式。而且我还更改了 browser.Thus 的语言，用户可以看到用户想要的日期格式。

如何使用 Angular 7 更改 formGroups 输入元素的日期格式？

How can I change date format for formGroups input element with Angular 7?

typescript

angular-date-format

angular