我的 HTML 文件中有两个使用 Bootstrap 的 datepickeres,我正在尝试显示从这个(第一个选择的日期)到这个(第二个选择的日期)的简单消息。
typescript 类是:
export class Datepicker {
date: any;
}
HTML 是:
<div class="form-group">
<label for="hireDate">Hire Date:</label>
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input class="form-control" name="hireDate" id="hireDate" placeholder="yyyy-mm-dd"
[(ngModel)]="datePicker.date" ngbDatepicker #d="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
<img src="/assets/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
</button>
</div>
</div>
</div>
</form>
</div>
<div>{{datePicker.date}} </div>
但它给我的结果是对象而不是选定的日期。 有帮助吗?
最佳答案
您可以使用 Angular DatePipe
将日期转换为您希望显示的格式。
<div> {{datePicker.date | date : 'yyyy-MM-dd'}} </div>
编辑:将 ngBootstrap 返回的日期对象 ({ "year": 2018, "month": 8, "day": 7 })
转换为 yyyy-MM-dd
格式,可以在datePicker.date
属性的setter
方法中进行转换,如下:
模块.ts
提供者:[DatePipe]
服务.ts
export class Datepicker {
_date: string;
constructor(private datePipe: DatePipe) {}
set date(value) {
let date = new Date(value.year, value.month, value.year);
this._date= this.datePipe.transform(date, 'yyyy-MM-dd');
}
get date() {
return this._date
}
}
关于html - 如何使用 Angular 在 Html 中显示日期?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51734456/