How get input of date from ngb-datepicker in Angular?

Question

I created a Hijri calendar and I need to take the input from the user and send it to the backend, my HTML code :

  <div class="form-row ">
      <div class="form-group col-md-6 mb-4">
        <label class="w-100 d-block"> From </label>
        <mat-form-field class="w-100" matStartDate>
          <input matInput [min]="currentDate" name="dp"  (ngModelChange)="select(model)"  formControlName="DueDate" />
          <ngb-datepicker class="rtl"  [firstDayOfWeek]="7">
          </ngb-datepicker>
        </mat-form-field>
      </div>
      <div class="form-group col-md-6 mb-4">
        <label class="w-100 d-block">To</label>
        <mat-form-field class="w-100" matEndDate>
          <input matInput readonly=true [min]="minDate" name="dp" (ngModelChange)="select(model)" formControlName="ExpiryDate" [(ngModel)]="lastDate" />
          <ngb-datepicker class="rtl" #dp  [firstDayOfWeek]="7">
          </ngb-datepicker>

        </mat-form-field>
      </div>
    </div>

Answer 1

You need make a function to transform the NgbDateStructure to the type of data you use in your dbs

Generally you send to a dbs a string in ISO format yyyy-MM-dd

ngbDateToString(date:any)
{
    return date.year+'-'+('0'+date.month).slice(-2)+('0'+date.day).slice(-2)
}

Or is use a Date object

ngbDateToDate(date:any)
{
    return new Date(date.year+'-'+('0'+date.month).slice(-2)+('0'+date.day).slice(-2))
}

But I see a few confussed your code. I imagine you get the data using a service. I like when get the data from a http.client, transform de props type Date in Date object -generally you received the types date as string, so, in service use map to transform the data

//declare a interfacte in the service
export DataInterface
{
  DueDate:Date|string
  ExpiryDate:Date|string
  ... rest of properties..
}

getData(id):Observable<DataInterface>
{
   //generally, you received DueDate or ExpiryDate as string, so we not use only
   //return this.httpClient.get('....') as DataInterface; 

   //else transform the string to Date
    return this.httpClient.get('....').pipe(
    map(res=>{
      res.DueDate=new Date(res.DueDate)
      res.ExpiryDate=new Date(res.ExpiryDate)
      return res;
    }
    ))
}

Idem if you has a function to get a list of objects

getList(id):Observable<DataInterface[]>
{
    return this.httpClient.get('....').pipe(
    map(res=>{
      res.forEach(x=>{
        x.DueDate=new Date(x.DueDate)
        x.ExpiryDate=new Date(x.ExpiryDate)
      }
      return res;
    }
    ))
}

But ngb-datepicker use NgbDateStructur, so you need transform when received the data and when send the data. Generally you has in component a function createForm

createForm(data:DataInterface=null)
{
    data=data || {} as DataInterface
    return new FormGroup({
        DueDate:new FormControl(data.DueDate?
             {
               year:data.DueDate.getFullYear(),
               month:data.DueDate.getMonth()+1,
               day:data.DueDate.getDate()
             }:
             null),
        ExpiryDate:new FormControl(data.ExpiryDate?
             {
               year:data.ExpiryDate.getFullYear(),
               month:data.ExpiryDate.getMonth()+1,
               day:data.ExpiryDate.getDate()
             }:
             null),
         ..rest of FormControl, e.g...
         id:new FormControl(data.id);
    })
}

Now you has a form. see that ONLY use formControlName

<form [formGroup]="form" (submit)="submit(form)">
      <div>
         <input class="form-control" placeholder="yyyy-mm-dd"
             name="dp" formControlName="DueDate" ngbDatepicker 
             class="rtl"  [firstDayOfWeek]="7"
             #dDueDate="ngbDatepicker">
          <button class="btn btn-outline-secondary calendar" (click)="dDueDate.toggle()" 
             type="button"></button>
      </div>

      <div>
         <input class="form-control" placeholder="yyyy-mm-dd"
             name="do" formControlName="ExpiryDate" ngbDatepicker 
             class="rtl"  [firstDayOfWeek]="7"
             #dExpiryDate="ngbDatepicker">
          <button class="btn btn-outline-secondary calendar" (click)="ExpiryDate.toggle()" 
             type="button"></button>
      </div>
      ..rest of FormControls in the way, e.g...
      <input formControlName="id">
      .....
      <button type="submit">submit</submit>
</form>

in your component.ts

//in ngOnInit()
ngOnInit()
{
    ..get the id from params or whatever
    this.dataService.getData(id).subscribe(res=>{
         this.form=this.createForm(res);
    })
}

In submit we can use the functions related at first

submit(form:FormGroup)
{
   if (form.valid)
   {
       const data={...form.value} //make a copy
       data.DueDate=this.ngbDateToString(data.DueDate)
       data.ExpiryDate=this.ngbDateToString(data.ExpiryDate)
       this.dataService.updateData(data).subscribe(res=>{
           console.log(res)
       })
   }
}