打字稿-Angular 2 Datepicker未绑定到日期值
尝试建立表单，但由于某种原因，尽管使用[[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[]
){
}
}
测试输出显示当前的“新”日期作为对象的值，但是输入不会更新User对象的日期值或反映该值，表明双向绑定都不起作用。 帮助将不胜感激。
角2、4和5：
最简单的方法：
<input type="date" [ngModel] ="dt | date:'yyyy-MM-dd'" (ngModelChange)="dt = $event">
除了[[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”，而不是日期类型（例如，在处理数据或保存到数据库时，我还没有尝试过是否会对日期产生负面影响）。
在你的组件中
let today: Date;
ngOnInit() {
this.today = new Date().toISOString().split('T')[0];
}
并在您的html中
<input name="date" [(ngModel)]="today" type="date" required>
在.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
>
Angular 2完全忽略type=date。如果将类型更改为Angular2 datepickers，您将看到jQuery datepicker具有双向绑定。
<input type='text' #myDate [(ngModel)]='demoUser.date'/><br>
这是一个非常糟糕的建议，值得一提的是：
我的项目最初使用Angular2 datepickers。所以，我现在正在使用jQuery datepicker，希望有经验的团队能够解决原始问题。 另外，由于它具有跨浏览器支持，因此它是更好的替代方法。 仅供参考，input=date在Firefox中不起作用。
好的建议：很少有很好的Angular2 datepickers：
[HTTPS://GitHub.com/俄迷人的例子/me US-pro jet OS/tree/master/angular2-schedule/app/frontend/components/达特picker]
[HTTPS://GitHub.com/MRP AR的EP/angular2-date picker]
[HTTPS://呜呜呜.那匹马加上.com/package/那个2-达特picker]
根据HTML5，您可以使用[(ngModel)]代替input type="date"。
它将允许3007950921081084175360指令从输入控件读取和写入值。
注意：如果日期字符串包含“ Z”，则要实现上述解决方案，您需要从日期开始修剪“ Z”字符。
有关更多详细信息，请通过mozilla docs上的此链接。
如果您使用的是现代浏览器，则有一个简单的解决方案。
首先，将模板变量附加到输入。
<input type="date" #date />
然后将变量传递到您的接收方法中。
<button (click)="submit(date)"></button>
在您的控制器中，只需将参数接受为HTMLInputElement类型并在HTMLInputElement上使用方法valueAsDate。
submit(date: HTMLInputElement){
console.log(date.valueAsDate);
}
然后，您可以像正常日期一样操作日期。
您还可以将<input [value]= "...">的值设置为通常会。
就个人而言，当有人试图忠于单向数据流时，我尝试远离组件中的双向数据绑定。
使用DatePipe
> // 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>
在您的组件上：
@Input public date: Date,
在Typescript-app.component.ts文件中
export class AppComponent implements OnInit {
currentDate = new Date();
}
在HTML输入字段中
<input id="form21_1" type="text" tabindex="28" title="DATE" [ngModel]="currentDate | date:'MM/dd/yyyy'" />
它将在输入字段中显示当前日期。