如何从数据库中以需要的格式显示日期，从 iso8601 到 type="date"

Question

大家好！显示 DB 日期时出现问题。我在数据库中有项目的字段 expiryDate： 数据库类型“日期”示例：“2019-12-12” 当我在 json 中以这样的角度获取日期形式时： expiryDate 的图片 (https://i.stack.imgur.com/23uhm.png) iso8601

我正在创建 CRUD 函数 - 更新，我想显示之前的日期，那是在我不知道如何操作之前。 我想显示上一个日期的图像 - http://prntscr.com/orrj6d

我尝试了几个例子，但它们没有帮助

project.ts:

this.dateInForm = new Date(expiryDate.dayOfMonth, expiryDate.monthValue - 1, expiryDate.year);
console.log(this.dateInForm); // => Tue Jun 11 1918 00:00:00 GMT+0202 (Восточная Европа, летнее время)



// expiryDate format is : 
//chronology: {id: "ISO", calendarType: "iso8601"}
//dayOfMonth: 12
//dayOfWeek: "THURSDAY"
//dayOfYear: 346
//era: "CE"
//leapYear: false
//month: "DECEMBER"
//monthValue: 12
//year: 2019

project.html：

<div>
<input type="date" style="font-size: 13px;" formControlName="expiryDate" [(ngModel)]="dateInForm"  class="question" class="form-control" placeholder="expiryDate" required autocomplete="off"/>
<label for="msg"><span></span></label>
</div>
<div *ngIf="updateProjectForm.controls.expiryDate.invalid &&(updateProjectForm.controls.expiryDate.dirty || updateProjectForm.controls.expiryDate.touched)">
<div *ngIf="updateProjectForm.controls.expiryDate.errors?.minDate">
     <p class="err-msg">
       expiryDate is  invalid
     </p>
</div>
 </div>

我不知道如何在 html 中显示日期 type="date" 请帮忙）

Answer 1

如果您使用 date 类型的原生 input 元素，则无需将其转换为 JavaScript Date 对象。如documentation 所述，value 属性接受

以 YYYY-MM-DD 格式表示日期的 DOMString，或者为空。

您应该将输入元素绑定到YYYY-MM-DD 格式的字符串值。

在您的 component.html 上，

<input type="date" style="font-size: 13px;" [(ngModel)]="dateInForm"  class="question" class="form-control" placeholder="expiryDate" required autocomplete="off"/>

在你的 component.ts 上，

dateInForm: string = '';

// other parts of the code

this.dateInForm = `${expiryDate.year}-${expiryDate. monthValue}-${expiryDate. dayOfMonth}`;

我已经通过here 创建了一个演示。