CODEWITHSUNDEEP
angulardateangular-date-format
Vladimir Kraykin
Vladimir Kraykin

Reputation: 11

Return format of date in console isn't the same like in input

I have setup my date to format yyyy-MM-dd and I need to make my component to return date like that. In input field everything works fine, for example 2020-10-03, but when I try console.log() I get this: 

endDate: Sat Oct 03 2020 00:00:00 GMT+0300 (IDT)

And I just need the same string like in input for my database.

HTML code:

<mat-form-field color="accent">
    <mat-label>End date</mat-label>
    <input matInput
           [matDatepicker]="endDate"
           [formControl]="form.get('endDate')"
           [errorStateMatcher]="matcher"
    >
    <mat-error *ngIf="form.get('endDate').hasError('required')">
      End date is <strong>required</strong>
    </mat-error>
    <mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
    <mat-datepicker #endDate color="primary"></mat-datepicker>
  </mat-form-field>

Code of Angular component:

export const PICK_FORMATS = {
  parse: {dateInput: {year: 'numeric',month: 'numeric', day: 'numeric'}},
  display: {
    dateInput: 'input',
    dateAllyLabel: {year: 'numeric', month: 'numeric', day: 'numeric'},
  }
}

export class PickDateAdapter extends NativeDateAdapter {
  format(date: Date, displayFormat: Object): string {
    if (displayFormat === 'input') {
      return new DatePipe('en-US').transform(date, 'yyyy-MM-dd')
    } else {
      return date.toString()
    }
  }
}

@Component({
  selector: 'app-update-coupon',
  templateUrl: './update-company-coupon.component.html',
  styleUrls: ['../../../app/shared/layouts/company/company.component.css'],
  providers: [
    {provide: DateAdapter, useClass: PickDateAdapter},
    {provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS}
  ]
})
export class UpdateCompanyCouponComponent {

  form = new FormGroup({

    id: new FormControl('', [
      Validators.required
    ]),

    endDate: new FormControl('', [
      Validators.required
    ]),

    price: new FormControl('', [
      Validators.min(1),
      Validators.required
    ]),

    amount: new FormControl('', [
      Validators.min(1),
      Validators.required
    ])

  })

  onSubmit() {
    console.log(this.form.value)
  }

I'll appreciate any help!

Upvotes: 0

Views: 542

Answers (3)

Vladimir Kraykin
Vladimir Kraykin

Reputation: 11

Both answers below can solve the problem, but I just found much easier way that works for ME. I used DatePipe from @angular/common and it returns value that I need. Also, there is no matter what date format you enter on you site, it will always return yyy-MM-dd.

new DatePipe('en-US').transform(this.form.value.endDate, 'yyyy-MM-dd')

Upvotes: 0

Gustavo Morais
Gustavo Morais

Reputation: 588

As Sandeep answered you can use libraries like Moment.js to format Dates or even something like this should work.

this.form.value.endDate.toLocaleDateString("en-US");

However, usually you would upload the full Date object to the Database, since it's a more universal and standard format. And this shouldn't be a problem, the next time you retrieve the data from the database and loads the full object into the front end, it'll be formatted nicely.

Upvotes: 0

sandeep1201
sandeep1201

Reputation: 1

I would use moment.js to format my date before posting to the backend. Please check it out it might help you http://momentjs.com/. I dont know much about Angular material and how they work tough.

Upvotes: 0

Related Questions