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[]
    ){

    }
}

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

Answer 1

Angular 2,4和5:

最简单的方法:plunker

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

Answer 2

而不是[(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 3

在您的组件中

let today: Date;

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

并在你的HTML中

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

Answer 4

使用日期管道

> // 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, [], []);  
}

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

根据 HTML5，您可以 input type="datetime-local" 使用 input type="date".

它将允许[(ngModel)]指令从输入控件读取和写入值。

注意：如果日期字符串包含“Z”，那么要实现上述解决方案，您需要从日期中删除“Z”字符。

有关更多详细信息，请访问mozilla 文档上的此链接。

Answer 7

Angular 2完全忽略了type=date.如果您更改类型,text您将看到您input具有双向绑定.

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

这是一个非常糟糕的建议,更好的一个遵循:

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

好建议:很少有很好的Angular2 datepickers:

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

• https://github.com/MrPardeep/Angular2-DatePicker

• https://www.npmjs.com/package/ng2-datepicker