Question

我有一个获取日期的表单控件，但是输入中没有显示值

<input formControlName="startDate" name="startDate" type="date" class="form-control">

我通过我尝试使用[value]的patchValue来确定值，但是不起作用我尝试转换为new Date()，但没有成功

this.form.patchValue({

  startDate: data.start,

});

Answer 1

输入类型date接受格式为yyyy-mm-dd的日期。这意味着您需要将日期转换为该格式。您可以先将其转换为ISO日期字符串，然后提取其中的日期部分，但是这不会考虑时区。因此，我们将创建一个函数，该函数以所需的格式获取日期，同时考虑时区。我们可以使用getDate和getMonth来考虑时区。

formatDate(date: Date | string): string {
    date = new Date(date);
    const day = `${date.getDate() < 10 ? '0' : ''}${date.getDate()}`;
    const month = `${date.getMonth() + 1 < 10 ? '0' : ''}${date.getMonth() + 1}`;
    const year = date.getFullYear();
    return `${year}-${month}-${day}`;
}

然后只需调用此函数即可转换格式。

this.form.patchValue({
    startDate: this.formatDate(data.start)
});

您还可以在创建表单时执行此操作。请注意，即使您从输入中选择一个日期，它也将以相同的格式yyyy-mm-dd进行绑定。

输入类型日期不显示值

1 个答案: