如何使用angular在Html中显示日期？
如何使用angular在Html中显示日期？
提问于 2018-08-08 03:51:43
我使用bootstrap在我的HTML文件中有两个日期选择器，我试图显示一条从这个(第一个选定日期)到这个(第二个选定日期)的简单消息。
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>但它给我的结果是对象，而不是所选的日期。有什么帮助吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-08 04:03:51
您可以使用Angular DatePipe将日期转换为您希望显示的格式。
<div> {{datePicker.date | date : 'yyyy-MM-dd'}} </div>编辑:要将ngBootstrap返回的date对象({ "year": 2018, "month": 8, "day": 7 })转换为yyyy-MM-dd格式，可以在datePicker.date属性的setter方法中进行转换，如下所示：
module.ts
providers : [DatePipe]
service.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
}
}Stack Overflow用户
发布于 2018-08-08 04:10:06
ng-bootstrap datepicker选择将为您提供如下所示的对象
Model: {
"year": 2018,
"month": 8,
"day": 9
}您可以从选定的模型编写initialize a date对象，如下所示：
<div> {{ new Date(datePicker.date.year, (datePicker.date.month - 1), datePicker.date.day) | date : 'yyyy-MM-dd'}} </div>https://ng-bootstrap.github.io/#/components/datepicker/examples#popup
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51734456
复制相关文章
相似问题