Question

尝试设置表单但由于某种原因，尽管使用了[（ngModel）]

，但我的html中的日期输入并未绑定到对象的日期值

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

    }
}

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

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中：

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 5

Angular 2完全忽略type=date。如果您将类型更改为text，则会发现您的input具有双向约束。

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

这是一个非常糟糕的建议，有更好的人可以遵循：

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

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

Answer 6

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

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

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

有关详细信息，请参阅有关mozilla文档的link。

Answer 7

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

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

<input type="date" #date />

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

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

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

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

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

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

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

Answer 8

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

Answer 9

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

var parallaxSettings = {
        initialOpacity: 1, //from 0 to 1, e.g. 0.34 is a valid value. 0 = transparent, 1 = Opaque
        opacitySpeed: 0.1, //values from 0.01 to 1 -> 0.01: slowly appears on screen; 1: appears as soon as the user scrolls 1px
        pageLoader: true
    };

$(document).on("ready", function() {
    parallaxImgScroll(parallaxSettings);

});

(function($) {
        $(document).ready(function() {
            var width = $(document).width();
            $(window).resize(function() {
                //do something
                if (width < 900) {
                    $('div#frame-1').css('bottom', 1900);
                    $('div#frame-1').attr('data-ps-vertical-position', '1900');
                } else if (width > 901) {
                    $('div#frame-1').css('bottom', 2500);
                    $('div#frame-1').attr('data-ps-vertical-position', '2500');
                }
                parallaxImgScroll(parallaxSettings);
            }).resize();
        });
    })(jQuery);

在您的组件上：

{{1}}

Answer 10

在打字稿中-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'" />

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

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

10 个答案: