打字稿-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对象的日期值或反映该值,表明双向绑定都不起作用。 帮助将不胜感激。

MoSheikh asked 2020-08-12T09:42:46Z
10个解决方案
69 votes

角2、4和5:

最简单的方法:

<input type="date" [ngModel] ="dt | date:'yyyy-MM-dd'" (ngModelChange)="dt = $event">
Bougarfaoui El houcine answered 2020-08-12T09:42:57Z
45 votes

除了[[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”,而不是日期类型(例如,在处理数据或保存到数据库时,我还没有尝试过是否会对日期产生负面影响)。

hakany answered 2020-08-12T09:43:22Z
8 votes

在你的组件中

let today: Date;

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

并在您的html中

<input name="date" [(ngModel)]="today" type="date" required>
Matiullah Karimi answered 2020-08-12T09:43:47Z
7 votes

在.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 
>
user10121373 answered 2020-08-12T09:44:12Z
5 votes

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]

Andrei Zhytkevich answered 2020-08-12T09:45:30Z
2 votes

根据HTML5,您可以使用[(ngModel)]代替input type="date"

它将允许3007950921081084175360指令从输入控件读取和写入值。

注意:如果日期字符串包含“ Z”,则要实现上述解决方案,您需要从日期开始修剪“ Z”字符。

有关更多详细信息,请通过mozilla docs上的此链接。

Shivam answered 2020-08-12T09:46:04Z
0 votes

如果您使用的是现代浏览器,则有一个简单的解决方案。

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

<input type="date" #date />

然后将变量传递到您的接收方法中。

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

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

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

然后,您可以像正常日期一样操作日期。

您还可以将<input [value]= "...">的值设置为通常会。

就个人而言,当有人试图忠于单向数据流时,我尝试远离组件中的双向数据绑定。

Daniel Ashcraft answered 2020-08-12T09:46:51Z
0 votes

使用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, [], []);  
}
M Rameez answered 2020-08-12T09:47:11Z
-1 votes

您可以使用以下解决方法:

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

在您的组件上:

 @Input public date: Date,
tecnocrata answered 2020-08-12T09:47:36Z
-2 votes

在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'" />

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

Deepak Bhattarai answered 2020-08-12T09:48:06Z
translate from https://stackoverflow.com:/questions/38175251/angular-2-date-input-not-binding-to-date-value