Angular: 如何格式化未插值的日期输入值？

Question

我正在为 .ts class 中的日期输入赋值，如下所示：

this.forma.controls.releaseDate.setValue(
  this.DatafromApi.propOne["0"].releaseDate
);

从 API 获取的值采用以下格式："2019092300000000"

我正在尝试应用 Angular 日期管道来格式化它：dd/mm/yyyy，但由于我没有进行字符串插值，所以我不知道如何应用 |日期。如果我在模板中分配值，我将只使用日期管道，但由于我在 .ts 组件文件中分配值，我只是不知道如何完成它。

这是 .ts 文件：

import { AuthService } from "./../../../../core/consultaService/auth.service";
import { Component, OnInit } from "@angular/core";
import { ReportesService } from "../../../../core/consultaService/reportes.service";
import { UtilService } from "../../../../services/util.service";

import {
  FormGroup,
  FormBuilder,
  Validators,
  FormControl
} from "@angular/forms";


@Component({
  selector: "app-detalle-nc-descuento-omitido",
  templateUrl: "./detalle-nc-descuento-omitido.component.html",
  styleUrls: ["./detalle-nc-descuento-omitido.component.scss"]
})
export class DetalleNcDescuentoOmitidoComponent implements OnInit {
  forma: FormGroup;
  fechaActual = new Date();
  user: any;
  selectedNote: any;
  descripcionArticulos: any;

  articulosArray = [];

  constructor(
    private fb: FormBuilder,
    public cargador: NgxSpinnerService,
    private reportesService: ReportesService,
    private utilService: UtilService,
    private authService: AuthService
  ) {
    this.forma = new FormGroup({
      releaseDate: new FormControl(),
      secondDate: new FormControl(),

    });
  }

  ngOnInit() {

    this.forma.controls.releaseDate.setValue(
      this.selectedNote.dataUno["0"].releaseDate
    );
    this.forma.controls.secondDate.setValue(
      this.selectedNote.dataUno["0"].releaseDate
    );
  }
}

这是html:

<div class="row">
  <div class="col-sm-6 ">
    <label class="col-sm-2 control-label">Second Date</label>
    <div class="col-sm-8 pl-0">
      <input formControlName="secondDate" name="secondDate" class="form-control" type="text" />
    </div>
  </div>
  <div class="col-sm-6">
    <label class="col-sm-2 control-label">Release Date</label>
    <div class="col-sm-3 pl-0">
      <input formControlName="releaseDate" name="releaseDate" class="form-control" type="text" />
    </div>    
  </div>
</div>

Answer 1

使用 DatePipe 过滤器

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


 constructor(private datePipe: DatePipe) {
   this.datePipe.transform(your_date, 'dd/mm/yyyy');
 }

此外，确保将其添加到提供商列表中

providers: [DatePipe ]

Answer 2

和之前的评论一样，使用DatePipe。举个例子，摘自我当前的项目：

<ng-container matColumnDef="control">
   <th mat-header-cell *matHeaderCellDef> Control Date </th>
   <td mat-cell *matCellDef="let element"> {{element.control | date:'d MMMM yyyy' }} </td>
</ng-container>

其中 {{element.control }} 包含日期 (1999-12-01) 并且 | date:'d MMM yyyy' 转换为 1999 年 12 月 1 日。

希望能帮到你

Answer 3

您可以在 component.ts 文件中使用 angular 内置日期管道，如下所示，首先您应该将日期管道添加到模块提供程序数组中。这样您就可以稍后在 component.ts 中注入 DatePipe。

providers: [DatePipe]

在您的 component.ts 中执行以下操作。

import { DatePipe } from '@angular/common'

在组件构造函数中注入日期管道

constructor(private datePipe: DatePipe) {}

在您的 ngOnInit 设置输入字段的值之前，使用 DatePipe.transform 方法

转换数据

 ngOnInit() {
    const releaseDate = this.datePipe.transform(this.selectedNote.dataUno["0"].releaseDate, 'dd/mm/yyyy');

    const secondDate= this.datePipe.transform(this.selectedNote.dataUno["0"].releaseDate, 'dd/mm/yyyy');

    this.forma.controls.releaseDate.setValue(releaseDate);
    this.forma.controls.secondDate.setValue(secondDate);
  }

Angular: 如何格式化未插值的日期输入值？

Angular: how to format date input value which is not being interpolated?

date

angular-pipe

angular