typescript 如何绑定日期/时间表单控件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46715543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to bind date/time form control?
提问by VladP
Here is my simple code that works only for 'title'. 'docdatetime' control appears blank. What am I doing wrong?
这是我的简单代码，仅适用于“标题”。“docdatetime”控件显示为空白。我究竟做错了什么？
//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))
});
}
回答by Jun Kang
The reason for this error is that the DatetimeLocalproperty on the input requires a very specific format, being YYYY-MM-DDTHH:MM:SS.SSS. This format is known as an ISO Date. So to fix your error, you have to pass in a date in that format. HOWEVER, an actual ISO Date's format is YYYY-MM-DDTHH:MM:SS.SSSZ. The Z refers to the timezone, which is always zero UTC offset. Look here for information on ToISOString(). So, an easy fix for that is to simply slice off the last character, which will always be the character Zin the new Date().toISOString().
此错误的原因是DatetimeLocal输入上的属性需要非常特定的格式，即YYYY-MM-DDTHH:MM:SS.SSS. 这种格式称为 ISO 日期。因此，要修复您的错误，您必须以该格式传递日期。但是，实际的 ISO 日期格式是YYYY-MM-DDTHH:MM:SS.SSSZ. Z 指的是时区，它始终为零 UTC 偏移量。在此处查看有关 的信息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))
});
NOTE
笔记
This means that the value you receive from that input will NOT be an actual Date. It'll be a string. So if you need it to be a date later on, make sure you create a New Date()using the value of the string and you should be good to go.
这意味着您从该输入收到的值将不是实际的Date. 它将是一个字符串。因此，如果您以后需要将它作为约会对象，请确保New Date()使用字符串的值创建一个，这样就可以了。
回答by Iskandar Reza
Try adding to the ngOnInitpart to the following:
尝试将ngOnInit部分添加到以下内容：
this.docForm.controls['docTitle'].setValue('My first document');
this.docForm.controls['docDate '].setValue('Jun 15, 2015, 9:43:11 PM');
