Datepicker: can’t set initual value using input & form control name

I can’t set the initial value of a datepicker that is bound to an input.
Sample code:

//.html
<form [formGroup]="form" class="form-default">
	<input type="text" class="form-control" formControlName="publishdate" ngbDatepicker #datepicker="ngbDatepicker">
</form>
<div class="input-group-addon" (click)="datepicker.toggle()"></div>
// ts
this.content.publishdate = new Date();
this.form.patchValue(this.content);

The input is not filled with the value from ‘content.publishdate’ and the datepicker when opened (through datepicker.toggle()) does not have the value from today.
Is this correct? I didn’t find anythin in the docs about this.

4 thoughts on “Datepicker: can’t set initual value using input & form control name

  1. I encountered the same problem. I fixed it by making sure that I’m passing in integers instead of strings:

    this.form.get('birthDate').setValue({
            year: parseInt(birthDate.format('YYYY'), 10),
            month: parseInt(birthDate.format('M'), 10),
            day: parseInt(birthDate.format('D'), 10)
          });
    
  2. I have faced the same problem and resolved using below code snippet

    import { Component, OnInit, EventEmitter } from '@angular/core';
    import { FormBuilder, Validators, FormArray, FormGroup } from '@angular/forms';
    import { DatePipe } from '@angular/common';
    
    @Component({
      selector: 'app-profile',
      templateUrl: './profile.component.html',
      styleUrls: ['./profile.component.css']
    })
    export class ProfileComponent implements OnInit {
    
     profileForm: FormGroup;
    
    constructor(
        private fb: FormBuilder,
        private userService: UserService,
        private datePipe: DatePipe) { }
    
    ngOnInit() {
    
       this.intilizeForm();
    
        this.userService.clientInfo(123).subscribe(userInfo => {
        const birthYear =  Number(this.datePipe.transform(userInfo.dob, 'yyyy'));
        const birthMonth =  Number(this.datePipe.transform(userInfo.dob, 'MM'));
        const birthDay =  Number(this.datePipe.transform(userInfo.dob, 'dd'));
        this.profileForm.controls.userInfo['controls'].dob.setValue({
          year: birthYear,
          month: birthMonth,
          day: birthDay
        });
        });
    }
    
      intilizeForm(): void {
      // Here also we can set the intial value Like dob:[ {year:1989 ,month:06, day: 10  }, ..... 
        this.profileForm = this.fb.group({
          userInfo: this.fb.group({
            dob: ['', [Validators.required]],
          }),
        });
    
      }
    
    
  3. I have faced the same problem and resolved using below code snippet

    import { Component, OnInit, EventEmitter } from '@angular/core';
    import { FormBuilder, Validators, FormArray, FormGroup } from '@angular/forms';
    import { DatePipe } from '@angular/common';
    
    @Component({
      selector: 'app-profile',
      templateUrl: './profile.component.html',
      styleUrls: ['./profile.component.css']
    })
    export class ProfileComponent implements OnInit {
    
     profileForm: FormGroup;
    
    constructor(
        private fb: FormBuilder,
        private userService: UserService,
        private datePipe: DatePipe) { }
    
    ngOnInit() {
    
       this.intilizeForm();
    
        this.userService.clientInfo(123).subscribe(userInfo => {
        const birthYear =  Number(this.datePipe.transform(userInfo.dob, 'yyyy'));
        const birthMonth =  Number(this.datePipe.transform(userInfo.dob, 'MM'));
        const birthDay =  Number(this.datePipe.transform(userInfo.dob, 'dd'));
        this.profileForm.controls.userInfo['controls'].dob.setValue({
          year: birthYear,
          month: birthMonth,
          day: birthDay
        });
        });
    }
    
      intilizeForm(): void {
      // Here also we can set the intial value Like dob:[ {year:1989 ,month:06, day: 10  }, ..... 
        this.profileForm = this.fb.group({
          userInfo: this.fb.group({
            dob: ['', [Validators.required]],
          }),
        });
    
      }
    

    Hi Raj,

    Please add providers [DatePipe] in @component decorator. Below are the sample
    @component({
    selector: ‘app-profile’,
    templateUrl: ‘./profile.component.html’,
    styleUrls: [‘./profile.component.css’],
    providers: [DatePipe]
    })