以编程方式设置 NgbDatePicker 的日期答案

【问题标题】：Programmatically set date of NgbDatePicker以编程方式设置 NgbDatePicker 的日期
【发布时间】：2019-12-28 02:01:25
【问题描述】：

我的组件中有两个 NgbDatePicker：

      input(
        type="text",
        ngbDatepicker,
        #d="ngbDatepicker",
        [readonly]="true",
        formControlName='startDate',
        (dateSelect)='setNewMinDate($event)',
        )
      input(
        type="text",
        ngbDatepicker,
        #e="ngbDatepicker",
        [readonly]="true"
        formControlName='endDate'
        )

还有这个处理程序：

  @ViewChild('e', {static: false}) endDateComponent: Query;

  setNewMinDate(e: NgbDateStruct) {
    const minDate: Moment = moment(e.year + '-' + e.month + '-' + e.day);

    this.createAnnForm.value.endDate = minDate.toISOString();
    this.endDateComponent.navigateTo(e);
  }

表单模型适用于 ISO 日期。

发生的情况是日历弹出窗口更改为新日期，但输入字段不会自行更新。有什么问题？

【问题讨论】：

你的意思是输入字段没有得到更新？
您使用的是响应式表单，只需使用 myform.get('endDate').setValue(...) 赋予价值
如果您希望表单控件包含 ISO 日期字符串，那么您应该使用日期适配器。有关文档，请参阅 ng-bootstrap.github.io/#/components/datepicker/…。您必须编写一个适配器来从字符串转换为 NgbDateStruct，反之亦然。
@Chellappanவ 是
正如@Eliseo 在评论中提到的，您可以使用 setValue 或 patchValue 将日期设置为输入字段

标签： angular angular-forms ngb-datepicker

【解决方案1】：

Ad @Eliseo 建议，我需要使用 ReativeForm API

form.get('endDate').setValue(...)

更新输入字段

【讨论】：