Формат возврата даты в консоли отличается от формата ввода - PullRequest
Новая
       38

Формат возврата даты в консоли отличается от формата ввода

0 голосов
/ 07 февраля 2019

Я настроил дату для форматирования yyyy-MM-dd, и мне нужно, чтобы мой компонент возвращал такую ​​дату.В поле ввода все работает нормально, например 2020-10-03, но когда я пытаюсь console.log(), я получаю это: 

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

И мне просто нужна такая же строка, как во вводе для моей базы данных.

HTML-код: 

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

Код угловой составляющей: 

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

Буду признателен за любую помощь!

Ответы [ 3 ]

0 голосов
/ 08 февраля 2019

Как ответил Сандип, вы можете использовать библиотеки, такие как Moment.js, для форматирования дат или даже что-то вроде этого должно работать. 

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

Однако обычно вы загружаете полный объект Date в базу данных, так как онболее универсальный и стандартный формат.И это не должно быть проблемой, в следующий раз, когда вы извлечете данные из базы данных и загрузите полный объект в интерфейс, он будет красиво отформатирован.

0 голосов
/ 08 февраля 2019

Оба ответа ниже могут решить проблему, но я нашел гораздо более простой способ, который работает для меня.Я использовал DatePipe из @angular/common, и он возвращает значение, которое мне нужно.Кроме того, независимо от того, какой формат даты вы вводите на своем сайте, он всегда будет возвращать yyy-MM-dd. 

new DatePipe('en-US').transform(this.form.value.endDate, 'yyyy-MM-dd')
0 голосов
/ 07 февраля 2019

Я бы использовал moment.js для форматирования даты перед публикацией в бэкэнд.Пожалуйста, проверьте, это может помочь вам http://momentjs.com/. Я не очень разбираюсь в материалах Angular и их жесткой работе.

...