打字稿-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'" />
它将在输入字段中显示当前日期。