Как я могу изменить формат даты для элемента ввода formGroups с Angular 7?

Question

Когда ввод имеет тип «Дата», формат даты dd/MM/yyyy.
Я хочу изменить формат даты с MM/dd/yyyy на dd/MM/yyyy (Turki sh Format и Turki sh Calender).

Вот код.

<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

Есть несколько способов сделать это, но не могли бы вы объяснить, хотите ли вы изменить формат внешнего вида даже в 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 2

Я решил эту проблему, используя DatePipe для создания нужного мне формата на стороне сервера. А также я меняю язык браузера. Таким образом, пользователь может видеть формат даты, который хочет пользователь.

Answer 3

Вы можете манипулировать своим полем formControl 'createDate'.

Используйте DatePipe, предоставленный angular, чтобы изменить дату в любом желаемом формате.

Во-первых, импортируйте DatePipe в ts вашего компонента:

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')