Angular 2 Date输入未绑定到日期值

Question

尝试设置表单但由于某种原因，尽管使用了[（ngModel）]，但我的html中的Date输入并未绑定到对象的日期值

HTML：

<input type='date' #myDate [(ngModel)]='demoUser.date'/><br>

表单组件：

export class FormComponent {
    demoUser = new User(0, '', '', '', '', new Date(), '', 0, [], []);  
}

用户类：

export class User {
    constructor (
        public id: number,
        public email: string,
        public password: string,
        public firstName: string,
        public lastName: string,
        public date: Date,
        public gender: string,
        public weight: number,
        public dietRestrictions: string[],
        public fitnessGoals: string[]
    ){

    }
}

测试输出显示当前“新”日期作为对象的值，但输入不更新用户对象的日期值或反映该值，表明这两个双向绑定都不起作用。非常感谢帮助。

Answer 1

Angular 2,4和5：

最简单的方法：plunker

<input type="date" [ngModel] ="dt | date:'yyyy-MM-dd'" (ngModelChange)="dt = $event">

Answer 2

在Typescript - app.component.ts文件中

 @Input public date: Date,

在HTML输入字段中

export class AppComponent implements OnInit {
    currentDate = new Date();
}

它将在输入字段中显示当前日期。

Answer 3

而不是[（ngModel）]，您可以使用：

// view
<input type="date" #myDate [value]="demoUser.date | date:'yyyy-MM-dd'" (input)="demoUser.date=parseDate($event.target.value)" />

// controller
parseDate(dateString: string): Date {
    if (dateString) {
        return new Date(dateString);
    }
    return null;
}

您也可以选择不使用parseDate函数。在这种情况下，日期将保存为字符串格式，如“2016-10-06”而不是日期类型（例如，我没有尝试在操作数据或保存到数据库时是否会产生负面影响）。

Answer 4

在您的组件中

let today: Date;

ngOnInit() {
  this.today = new Date().toISOString().split('T')[0];
}

并在你的HTML中

<input name="date" [(ngModel)]="today" type="date" required>

Answer 5

在.ts：

today: Date;

constructor() {  

    this.today =new Date();
}

html的：

<input type="date"  
       [ngModel]="today | date:'yyyy-MM-dd'"  
       (ngModelChange)="today = $event"    
       name="dt" 
       class="form-control form-control-rounded" #searchDate 
>

Answer 6

Angular 2完全忽略了type=date。如果你将类型更改为text，你会发现你的input有双向绑定。

<input type='text' #myDate [(ngModel)]='demoUser.date'/><br>

这是一个非常糟糕的建议，有更好的建议：

我的项目最初使用的是jQuery。所以，我现在正在使用jQuery datepicker，希望有角度的团队能够解决原始问题。此外，它还是一个更好的替代品，因为它具有跨浏览器支持。仅供参考，input=date在Firefox中不起作用。

好建议：很少有很好的qazxsw poi：

• Angular2 datepickers
• https://github.com/emirdeliz/meus-projetos/tree/master/angular2-schedule/app/frontend/components/datepicker
• https://github.com/MrPardeep/Angular2-DatePicker

Answer 7

根据HTML5，您可以使用https://www.npmjs.com/package/ng2-datepicker而不是input type="datetime-local"。

它将允许input type="date"指令从输入控件读取和写入值。

注意：如果日期字符串包含'Z'，那么要实现上述解决方案，您需要修剪日期中的'Z'字符。

有关更多详细信息，请在mozilla文档中查看此[(ngModel)]。

Answer 8

如果您使用的是现代浏览器，那么这是一个简单的解决方案。

首先，将模板变量附加到输入。

link

然后将变量传递给接收方法。

<input type="date" #date />

在您的控制器中，只需将参数作为HTMLInputElement类型接受，并在HTMLInputElement上使用方法valueAsDate。

<button (click)="submit(date)"></button>

然后，您可以在正常日期操纵日期。

您也可以像平常一样设置

submit(date: HTMLInputElement){
    console.log(date.valueAsDate);
}

的值。

就个人而言，当有人试图坚持单向数据流时，我试图远离我的组件中的双向数据绑定。

Answer 9

使用DatePipe

<input [value]= "...">

Answer 10

您可以使用解决方法，如下所示：

> // ts file

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

@Component({
....
providers:[DatePipe]
})

export class FormComponent {

constructor(private datePipe : DatePipe){}

    demoUser = new User(0, '', '', '', '', this.datePipe.transform(new Date(), 'yyyy-MM-dd'), '', 0, [], []);  
}

在您的组件上：

<input type='date' (keyup)="0" #myDate [(ngModel)]='demoUser.date'/><br>