首页 > 解决方案 > 如何将 kendodatepicker 与可选的 formControl 填充一起使用?

问题描述

我正在使用 kendo-datepicker,当我保存一个空日期并尝试编辑它之后我遇到了问题。

我的 html

<kendo-grid-column width="220" [sortable]="false" field="end_date" [filterable]="false" title="Data final">

  <ng-template kendoGridCellTemplate let-dataItem>
    {{ dataItem.end_date | date:'shortDate' }}
  </ng-template>

  <ng-template kendoGridEditTemplate let-dataItem>
      <div class="whole-cell">
        <kendo-datepicker
          [min]="dataMinima"
          [formControl]="formGroup.get('end_date')"
        ></kendo-datepicker>
      </div>
  </ng-template>
</kendo-grid-column>

这是我创建我的函数form group

const createFormGroup = (dataItem?: ClasseProfessor) => {
  if (dataItem) {
    return new FormGroup({
      id: new FormControl(dataItem.id),
      class_id: new FormControl(dataItem.class_id),
      user_id: new FormControl(dataItem.user_id, Validators.required),
      start_date: new FormControl(new Date(dataItem.start_date), Validators.required),
      end_date: new FormControl(new Date(dataItem.end_date)),
    });
  } else {
    return new FormGroup({
      class_id: new FormControl(null),
      user_id: new FormControl(null, Validators.required),
      start_date: new FormControl(null, Validators.required),
      end_date: new FormControl(null)
    });
  }
};

我的end_date是可选的,我在数据库中保存空值,但是当我编辑我的列时formGroupnew Date(null)我得到了值31/12/1969

我也尝试过这样做:

const createFormGroup = (dataItem?: ClasseProfessor) => {
  if (dataItem) {
    return new FormGroup({
      id: new FormControl(dataItem.id),
      class_id: new FormControl(dataItem.class_id),
      user_id: new FormControl(dataItem.user_id, Validators.required),
      start_date: new FormControl(dataItem.start_date, Validators.required),
      end_date: new FormControl(dataItem.end_date),
    });
  } else {
    return new FormGroup({
      class_id: new FormControl(null),
      user_id: new FormControl(null, Validators.required),
      start_date: new FormControl(null, Validators.required),
      end_date: new FormControl(null)
    });
  }
};

但是我收到一个错误,说kendo-datepicker期望一个Date实例。

我该如何解决这个问题?当我单击编辑按钮时,我需要显示一个空日期而不是new Date(null)

标签: angularkendo-ui

解决方案


推荐阅读