Programmatically set date of NgbDatePicker

Question

I've two NgbDatePicker in my component:

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

and this handler:

  @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);
  }

Form model works with ISO date.

What happens is that the calendar popup change is date to the new one, but the input field doesn't update itself. What is the problem?

You're using Reactive Forms, just give value using `myform.get('endDate').setValue(...)` — Eliseo, Dec 27 '19 at 15:58
If you want your form control to contain an ISO Date string, then you should use a date adapter. See https://ng-bootstrap.github.io/#/components/datepicker/overview#date-model for the documentation. You'll have to write an adapter to convert from string to NgbDateStruct and vice-versa. — JB Nizet, Dec 27 '19 at 15:59
As @Eliseo mentioned in the comment you can use setValue or patchValue to set date to input field — Chellappan வ, Dec 27 '19 at 17:57

score 0 · Answer 1 · answered Dec 27 '19 at 18:01

0

Ad @Eliseo suggests, I need to use ReativeForm API

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

to update input fields

answered Dec 27 '19 at 18:01

Nemus

1,322
2
23
47

Programmatically set date of NgbDatePicker

1 Answers1