CODEWITHSUNDEEP
angulartypescriptangular-date-format
Aylin Sivari
Aylin Sivari

Reputation: 29

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

When input is of type 'Date', date format is dd/MM/yyyy.
I want to change date format from MM/dd/yyyy to dd/MM/yyyy (Turkish Format and Turkish Calender).

Here is the code.

<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)  
    });

Suggestions and solutions will be appreciated.

Upvotes: 1

Views: 10654

Answers (3)

Aylin Sivari
Aylin Sivari

Reputation: 29

I solved this issue using DatePipe for making format which I wanted at the backend side. And also I change language of browser.Thus,user can see date format that user wants.

Upvotes: -1

XYZ_undefined
XYZ_undefined

Reputation: 64

There are multiple way to do this, But can you explain if you want to change the format looks even in the html? if not i'd suggest you to use formatDate instead of datePipe which is lot easier in my opinion.

in your .ts file do this. 

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

Upvotes: -1

varundhariyal
varundhariyal

Reputation: 1925

You can manipulate your formControl field 'createDate'.

Use DatePipe provided by angular to change date in any desired format.

Firstly,import DatePipe in your component's ts:

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

Inject date pipe in providers array:

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

Declare in constructor :

 constructor(
    private datePipe: DatePipe
  ) { }

You can either make a function which manipulate date; simply call in updateData(formValue) or directly manipulate date in updateData(formValue) method

// date manipulation using DatePipe

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

Upvotes: -1

Related Questions