时间戳

首页 > 解决方案 > 在没有时间的情况下在Angular中格式化日期

angular - 在没有时间的情况下在Angular中格式化日期

问题描述

在我的组件中，我将以下值传递给控件。我传递的值都是日期类型。

this.form.controls["DepartureDate"].setValue(this.flightChoice.departureDate);
this.form.controls["ReturnDate"].setValue(this.flightChoice.returnDate);

控件是 Text 类型， 因为如果我使用 date 类型，则根本不会写入值。

<input class="form-control" formControlName="DepartureDate" type="text" id="departureDate" />
<input class="form-control" formControlName="ReturnDate" type="text" id="returnDate" />

现在传递值的结果是：这样的日期： 2018-06-30T00:00:00+02:00 当我想要这样的日期时： 30-06-2018 我该怎么做才能拥有这种值以及为什么使用类型的输入date不会接受我的值？

标签： angulardate

解决方案

这是您的 解决方案

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, } from '@angular/forms';
import moment from 'moment';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 6';
  dateForm: FormGroup;
  depDate: any;
  retDate: any

  constructor(private fb: FormBuilder) {
    this.createDateForm();
  }

  createDateForm() {
    this.dateForm = this.fb.group({
      DepartureDate: null,
      ReturnDate: null
    });
  }

  chageDepartureDate() {
    this.depDate = moment(this.dateForm.get('DepartureDate').value).format("DD-MM-YYYY");
  }

  changeReturnDate(event) {
    this.retDate = moment(this.dateForm.get('ReturnDate').value).format("DD-MM-YYYY");

  }
});

  }
}

HTML：

<form [formGroup]="dateForm">
    <p>Departure Date</p>
    <input (change)="chageDepartureDate($event)" type="date" formControlName="DepartureDate" placeholder="choose departure date">
    <p>Return Date</p>
    <input (change)="changeReturnDate($event)" type="date" formControlName="ReturnDate" placeholder="choose departure date">
</form>

<p>Departure Date = {{depDate}}</p>
<p>Return Date = {{retDate}}</p>

推荐阅读