输入类型日期不适用于某些角度6

Question

我有一个日期输入为html5的日期，但我使用的是日期选择器，但我的值包含一些额外的字符，例如“ 2019-01-01T23-00-11”，这不是第一次在文本框中出现，下面的代码

app.component.html

<div style="text-align:center">
  <input  type="date" [(ngModel)]="name" value="name">
  <p>Value: {{ name }}</p>
</div>

app.component.ts

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name: string = '2019-01-01T23-00-11';
  //name: string = '2019-01-01';
  ngOnInit() {

  }

}

Answer 1

如果将日期输入更改为datetime-local，然后将字符串更改为以冒号分隔的时间而不是用连字符分隔的时间，则可以工作。这将在Chrome中运行。尚未测试所有其他浏览器。

// In the html
<input  type="datetime-local" [(ngModel)]="name" value="name">

// In app.component.ts
name = `2019-01-01T23:00:11`

如果这样做，日期和时间将显示在浏览器中。

Answer 2

您可以先格式化值

getDate(){

   let d = new Date(this.name)

     return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`

   }

HTML

<input  type="date" [(ngModel)]="getDate()" value="name">