Question

我使用引导程序在HTML文件中有两个日期选择器，并且我试图显示从此（第一个选定日期）到此（第二个选定日期）的简单消息。

打字稿类是：

 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>

但是它给了我Object而不是选择的日期。有帮助吗？

Answer 1

您可以使用Angular DatePipe将日期转换为您希望显示的格式。

<div> {{datePicker.date | date : 'yyyy-MM-dd'}} </div>

DEMO

EDIT：要将ngBootstrap返回的日期对象({ "year": 2018, "month": 8, "day": 7 })转换为yyyy-MM-dd格式，可以在setter属性的datePicker.date方法内进行如下转换： / p>

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
  }
}

Answer 2

ng-bootstrap datepicker选择为您提供了这样的对象

Model: {
  "year": 2018,
  "month": 8,
  "day": 9
}

您可以像这样从所选模型编写初始化日期对象：

<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

如何使用angular在HTML中显示日期？

2 个答案: