使用 igx-date-picker 格式化日期答案

【问题标题】：Date formatting with igx-date-picker使用 igx-date-picker 格式化日期
【发布时间】：2020-04-26 10:03:52
【问题描述】：

我有一个实现 IgxDatePickerComponent 的 Angular 模板。我在尝试将控件的下拉部分和输入部分的日期格式化为英国格式时遇到问题。

这是我的控件代码

 <igx-date-picker  #dateFromDatePicker mode="dropdown" locale="en-GB"
             cancelButtonLabel="close" todayButtonLabel="today">
              <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value"
                  let-displayData="displayData">
                  <igx-input-group type="border">
                      <igx-prefix (click)="openDialog(dropDownTarget)">
                          <igx-icon>today</igx-icon>
                      </igx-prefix>
                      <label igxLabel for="dropDownTarget">Start Date</label>
                    <input #dropDownTarget  class="igx-date-picker__input-date" igxInput [value]="displayData"
                          [igxMask]="'00/00/0000'" [placeholder]="'dd/mm/yyyy'"  (blur)="changeStartDate($event)"/>
                  </igx-input-group>
              </ng-template>
          </igx-date-picker>

而组件代码是

  changeStartDate(event) {
    const input = event.target.value;
    if (input !== '') {
      const parsedDate = new Date(input);
      if (this.isDateValid(parsedDate)) {
        this.startDate = parsedDate;
      }
    } else {
      this.dateFromDatePicker.deselectDate();
      this.startDate = input;
    }
  }

当模糊事件触发时 event.target.value 为“29/04/2020” 当这达到以下代码行时。

const parsedDate = new Date(input);

parsedDate 的结果是“无效日期”。

我需要将“29/04/2020”转换为有效日期。我尝试了各种管道，但似乎都不起作用。

【问题讨论】：

与 datepicker 绑定的displayData 的值是多少？ [value]="displayData"?
该值为英国格式的字符串日期，即“29/04/2020”

标签： html angular typescript datepicker angular-template

【解决方案1】：

您必须格式化 displayDate 字符串才能将其转换为有效日期

        const parsedDate = new Date(input.split('/').reverse().join("-"));

这会将您的"29/04/2020" 转换为"2020-04-29"，然后Date 可以接受。

【讨论】：