Question

我用angular5定义了一个输入类型为date5的输入：

<input [(ngModel)]="activity.subActivitiesList[4].releaseDate" type='date'/>

当我从网页上选择一个日期并将其插入数据库时，一切正常。但是当我从db读取日期并在前一个字段中显示它时，日期（时间戳）不会出现。你能告诉我为什么吗？

由于

Answer 1

添加日期格式应使用管道显示。格式可以像短日期等

Answer 2

This can be done using pipes,

Template:
 <input [value]="birthDate | date:'yyyy-MM-dd' " type='date' />
 <button (click)="setBirthDate()">Set Date</button>

Typescript:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  birthDate = '';

  setBirthDate(){
    this.birthDate = '05/05/1990';
  }
}


**[Live Demo:][1]**


  [1]: https://stackblitz.com/edit/angular-mxvlzv

Answer 3

日期可以从typescript.check转换为'yyyy-MM-dd'以下代码。

// HTML

     <input [(ngModel)]="date" name="date" type='text' />
     <button (click)="setDate()">Set Date</button>

//打字稿

import { Component } from '@angular/core';

import { DatePipe } from '@angular/common'

@Component({
    templateUrl: './test.component.html',
 })

 export class TestComponent {

     constructor(private datePipe: DatePipe){}

     date : any;

     setDate(){     

         this.date = this.datePipe.transform(new Date(), 'yyyy-MM-dd');

     }

 }

并在app.module.ts

中添加'DatePipe'

从'@ angular / common'导入{DatePipe};

@ngModules（{

... 提供者：[DatePipe]

}）

Answer 4

好的，我终于找到了问题。首先感谢您的回复，正确的解决方案正是管道的使用但是： 1）管道的日期格式必须与检索日期相同; 2）管道的日期格式不得与用户看到的相同。

例如：在我的情况下，db日期格式为'yyyy-MM-dd'，但显示的日期格式为'dd / MM / yyyy'。因此管道必须设置为'yyyy-MM-dd'。

Angular5输入日期

4 个答案: