如何绑定日期/时间表单控件？

Question

这是我的简单代码，仅适用于＆＃39; title＆＃39;。 ＆＃39; docdatetime＆＃39;控件显示为空白。我做错了什么？

//template ===================================================
<div class="form-group">
  <input type="text" id="title" formControlName="title" class="form-control">
</div>

<div class="form-group">
  <input type="datetime-local" id="docdatetime" formControlName="docdatetime" class="form-control">
</div>

//component.ts ===============================================
import { FormGroup, FormControl } from '@angular/forms';
..... 

export class..... 
    docForm: FormGroup;

    ngOnInit() {
        let docTitle = 'My first document';
        let docDate = 'Jun 15, 2015, 9:43:11 PM';
        this.docForm = new FormGroup({
            'title': new FormControl(docTitle),
            'docdatetime': new FormControl(new Date(docDate))
        });
    }   

Answer 1

此错误的原因是输入上的DatetimeLocal属性需要非常特定的格式，即YYYY-MM-DDTHH:MM:SS.SSS。此格式称为ISO日期。因此，要修复错误，您必须以该格式传递日期。但是，实际的ISO日期格式为YYYY-MM-DDTHH:MM:SS.SSSZ。 Z指的是时区，它始终为零UTC偏移。 Look here for information on ToISOString()。因此，一个简单的解决方法是简单地切掉最后一个字符，它始终是Z中的字符new Date().toISOString()。

let docTitle = 'My first document';
let docDate = 'Jun 15, 2015, 21:43:11 UTC'; //You'll want to change this to UTC or it can mess up your date.
this.docForm = new FormGroup({
    'title': new FormControl(docTitle),
    'docdatetime': new FormControl(new Date(docDate).toISOString().slice(0, -1))
});

注

这意味着您从该输入中收到的值将不是实际的Date。它将成为一个字符串。因此，如果您以后需要将其作为日期，请确保使用字符串的值创建New Date()并且您应该很高兴。

修改

这里有plunk显示此工作。

Answer 2

尝试将ngOnInit部分添加到以下内容中：

this.docForm.controls['docTitle'].setValue('My first document');
this.docForm.controls['docDate '].setValue('Jun 15, 2015, 9:43:11 PM');