如何从Angular中的ngb-datepicker获取日期输入？

如何解决如何从Angular中的ngb-datepicker获取日期输入？

我创建了一个Hijri日历，我需要从用户那里获取输入并将其发送到后端，即我的HTML代码：

  <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>

解决方法

您需要创建一个函数以将NgbDateStructure转换为您在数据库中使用的数据类型

通常，您将ISO格式yyyy-MM-dd的字符串发送给dbs

magic_mapper

或者正在使用Date对象

magic_mapper

但是我看到一些混淆了您的代码。我想您可以使用服务来获取数据。我喜欢从http.client获取数据时，在Date对象中转换de props类型的Date-通常，您以字符串形式接收date类型，因此，在服务中使用map转换数据

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

同上，如果您具有获取对象列表的功能

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

但是ngb-datepicker使用NgbDateStructur，因此在接收数据和发送数据时需要进行转换。通常，您在组件中具有函数createForm

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

现在您有了一个表格。看到只使用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; } )) }

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

在您的component.ts中

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>