Angular 2 - 日期选择器显示 mm/dd/yyyy 而不是对象日期

Posted 2023-03-05

【中文标题】Angular 2 - 日期选择器显示 mm/dd/yyyy 而不是对象日期

【英文标题】：Angular 2 - datepicker shows mm/dd/yyyy instead of object date

【发布时间】：2017-05-07 01:44:01

【问题描述】：

我使用 Angular 2 中的简单日期选择器，如下所示；

<div class="form-group row">
    <label for="hourdate-field" class="col-md-4  col-form-label text-md-right">Date</label>
    <div class="col-md-7 ">
        <input type="date" formControlName="hourdate" class="form-control">
    </div>
</div>

日期选择器在选择并保存日期后可以正常工作，但在选择要编辑的现有对象时，会显示占位符 mm/dd/yyyy 而不是对象日期。

关于如何显示对象的日期值而不是占位符的任何想法？

根据表单 init 下方的请求；

initForm() 
    let hour_id = 0; 
    let customer_id = 0;
    let payer_id = 0;
    let project = '';
    let description = '';
    let hours = '';
    let hourdate = new Date('01-01-1900');

    if (this.selected === true)  //edit existing
        hour_id = this.selectedHour.hour_id;
        customer_id = this.selectedHour.customer_id;
        payer_id = this.selectedHour.payer_id;
        project = this.selectedHour.project;
        description = this.selectedHour.description;
        hours = this.selectedHour.hours;
        hourdate = this.selectedHour.hourdate;   
    

    //create the form
    this.hourForm = this.formBuilder.group(
        hour_id:[hour_id],
        customer_id: [customer_id],
        payer_id: [payer_id],
        project: [project],
        description: [description],
        hours: [hours],
        hourdate: [hourdate]
    );

使用字符串而不是日期为我指明了正确的方向

变化：

let hourdate = '1900-01-01'; 
hourdate = this.datepipe.transform(this.selectedHour.hourdate, 'yyyy-MM-dd'); 

【问题讨论】：

你是如何初始化表单控件的？

我编辑了问题

【参考方案1】：

表单控件的值只是格式为 YYYY-MM-dd 的文本字符串，而不是实际日期。因此，我们可以通过以下操作正确初始化：

initForm() 
    <...>
    let hourdate = '1900-01-01';

    //create the form
    this.hourForm = this.formBuilder.group(
        <...>
        hourdate: [hourdate]
    );

如果有需要绑定的模型，我们可以订阅valueChanges 属性，其形式为：

this.hourForm.controls['hourdate'].valueChanges.subscribe(value => [myModelProperty] = new Date(value));

Plunker

【参考方案2】：

要初始化日期，您应该以正确的格式（字符串，而不是日期对象）传递它，请参阅https://***.com/a/14212715/1990451。

为了解决您的问题，只需将 hourdate 分配更改为以下内容：

let hourdate = '1900-01-01';