Angular ngb日期选择器在角度材质输入（matInput）中不工作

我想在材料输入中使用ngb日期选择器。我成功地将datepicker应用于mat输入。但是有一个月和年下降的问题

我尝试了以下代码片段：

<mat-form-field>
<input matInput placeholder="Select Valid Till" name="GodownValidTill" [(ngModel)]="GodownValidTill" ngbDatepicker #d2="ngbDatepicker" required readonly>
<mat-icon style="float:right;height:20px;width:20px;" (click)="d2.toggle()" svgIcon="calendar" title="Calendar"></mat-icon>
</mat-form-field>

---

是否有完美工作的解决方案？

我不确定到底是什么问题，但我可以将这两个库集成在一起。我使用的代码和你几乎完全一样

<mat-form-field class="example-full-width">
  <input matInput placeholder="Favorite food"  name="GodownValidTill" [(ngModel)]="GodownValidTill" (ngModelChange)="onSelect($event)" ngbDatepicker #d="ngbDatepicker" required readonly>
  <mat-icon (click)="d.toggle()">calendar-today</mat-icon>
</mat-form-field>

今日日历

就功能而言，没有问题。当然，您需要对CSS/样式进行自己的更改。我复制了一个演示

---

与其同时使用这两个库，为什么不使用角度Boostrap或角度材质呢？这样，您就不需要管理不同的包。这两个库都有自己的日期选择器组件（/）。

我试图重现这个问题，发现默认情况下，ngbDatePicker是它所附加到的输入字段下方的附件。当我们使用matInput时，实际的输入字段围绕着各种材料类，这些材料类导致了日期选择器的问题

因此，我们可以做的是，我们可以使用的

container

属性将日期选择器附加到正文中，如下所示。容器属性当前仅支持“body”作为值

    <mat-form-field>
            <input matInput type="text" ngbDatepicker container="body" #d="ngbDatepicker" (click)="d.open()" placeholder="Date Picker with issue"/>
    </mat-form-field>

---

这是同样的理由。我希望这会有所帮助。

另一个方法是材料日期选择器。见

第一步是创建自定义标题

<div class="mat-calendar-header">
  <div class="mat-calendar-controls">
    <button mat-icon-button type="button" class="mat-calendar-previous-button arrow"
            [disabled]="!previousEnabled()" (click)="customPrev()"
            [attr.aria-label]="prevButtonLabel">
    </button>
    <select [ngModel]="dateMonth" (ngModelChange)="dateMonth=$event;select()"class="custom-select">
    <option *ngFor="let month of months;let i=index" [value]="i">{{month}}</option>
    </select>
    <select [ngModel]="dateYear" (ngModelChange)="dateYear=+$event;select()" class="custom-select" style="width:70%" >
    <option *ngFor="let i of [-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10]" [value]="dateYear+i">{{dateYear+i}}</option>
    </select>
    <button mat-icon-button type="button" class="mat-calendar-next-button arrow"
            [disabled]="!nextEnabled()" (click)="customNext()"
            [attr.aria-label]="nextButtonLabel">
    </button>
  </div>
</div>

如果我们的头扩展了MatCalendarHeader，我们可以实现OnInit-将值放入年和月的组合框中，并添加ElementRef y Render2。我使用Renderr2添加/删除类removeRow

.removeRow tbody tr:first-child td{
  display:none
}

这允许我们在月的第一天的日期为Sundoay、Monday或Throusday时不显示第一行-在物料日期选择器中显示月份，但我们在组合框中显示它

export class ExampleHeader extends MatCalendarHeader<any> implements OnInit {
  calendar:any
  months=[
    "January","February","March","April","May","June","July","August","September","October","November","December"]

  dateYear:any
  dateMonth:any

  constructor(_intl:MatDatepickerIntl,
      _calendar: MatCalendar<any>, _dateAdapter: DateAdapter<any>,
      @Inject(MAT_DATE_FORMATS) _dateFormats: MatDateFormats, cdr: ChangeDetectorRef,private el:ElementRef,private render:Renderer2){
    super(_intl,_calendar,_dateAdapter,_dateFormats,cdr)
        this.calendar=_calendar;
        this.dateYear=this.calendar.activeDate?this.calendar.activeDate.getFullYear():new Date().getFullYear()
        this.dateMonth=this.calendar.activeDate?this.calendar.activeDate.getMonth():new Date().getMonth()
  }
  select()
  {
    this.calendar.activeDate=new Date(this.dateYear,this.dateMonth)
    this.refreshCombo(this.dateMonth,this.dateYear)
  }
  ngOnInit()
  {
    this.refreshCombo(this.calendar.activeDate.getMonth(),this.calendar.activeDate.getFullYear())
  }
  refreshCombo(month,year)
  {
     this.dateMonth=month;
     this.dateYear=year;
     const element=this.el.nativeElement.parentElement
     if (new Date(year,month,1).getDay()<=2)
      this.render.addClass(element,'removeRow')
     else
      this.render.removeClass(element,'removeRow')
  }

  /** Handles user clicks on the previous button. */
  customPrev(): void {
    this.previousClicked()
    this.refreshCombo(this.calendar.activeDate.getMonth(),this.calendar.activeDate.getFullYear());
  }

  /** Handles user clicks on the next button. */
  customNext(): void {
    this.nextClicked()
     this.refreshCombo(this.calendar.activeDate.getMonth(),this.calendar.activeDate.getFullYear());
 }

导出类ExampleHeader扩展MatCalendarHeader实现OnInit{
日历：有吗
月份=[
“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]
日期年份：有吗
日期月份：有吗
构造函数（_intl:MatDatepickerIntl，
_日历：MatCalendar，_dateAdapter:dateAdapter，
@Inject（MAT_DATE_FORMATS）_dateFormats:MatDateFormats，cdr:ChangeDetectorRef，private el:ElementRef，private render:Render2）{
超级（_intl、_calendar、_dateAdapter、_dateFormats、cdr）
this.calendar=\u calendar；
this.dateYear=this.calendar.activeDate？this.calendar.activeDate.getFullYear（）：new Date（）.getFullYear（）
this.dateMonth=this.calendar.activeDate？this.calendar.activeDate.getMonth（）：new Date（）.getMonth（）
}
选择（）
{
this.calendar.activeDate=新日期（this.dateYear，this.dateMonth）
this.refreshCombo（this.dateMonth，this.dateYear）
}
恩戈尼尼特（）
{
this.refreshCombo（this.calendar.activeDate.getMonth（），this.calendar.activeDate.getFullYear（））
}
刷新组合（月、年）
{
this.dateMonth=month；
this.dateYear=year；
常量元素=this.el.nativeElement.parentElement
if（新日期（年、月、1）.getDay（）感谢您的快速回复…请查看您的演示…我想您已经在月和年下拉列表中注意到了这个问题…所以请告诉我它是否有解决方案？…事实上我不喜欢mat datepicker…所以我想使用ngb-datepicker@Tejas对不起，伙计，但是我可以知道你面临的关于月份和年份下拉列表的确切问题是什么吗？我有我这边没有问题，因为我可以选择和使用日期/月份。请点击六月或2019年，然后选择另一个月或年份……您将无法选择不同的月份，例如五月或十二月。比我得到的最接近的是自定义标题，请参阅Thank@Eliseo中的我的stackblitz，这也是一个正确的解决方案……但如果我们只是将输入标记中的tainer属性以获得正确的结果，那么我们不需要为自定义控件编写大量代码。当材质有自己的日期选择器时，为什么要将ngbdatepicker包装在mat输入中？
export class ExampleHeader extends MatCalendarHeader<any> implements OnInit {
  calendar:any
  months=[
    "January","February","March","April","May","June","July","August","September","October","November","December"]

  dateYear:any
  dateMonth:any

  constructor(_intl:MatDatepickerIntl,
      _calendar: MatCalendar<any>, _dateAdapter: DateAdapter<any>,
      @Inject(MAT_DATE_FORMATS) _dateFormats: MatDateFormats, cdr: ChangeDetectorRef,private el:ElementRef,private render:Renderer2){
    super(_intl,_calendar,_dateAdapter,_dateFormats,cdr)
        this.calendar=_calendar;
        this.dateYear=this.calendar.activeDate?this.calendar.activeDate.getFullYear():new Date().getFullYear()
        this.dateMonth=this.calendar.activeDate?this.calendar.activeDate.getMonth():new Date().getMonth()
  }
  select()
  {
    this.calendar.activeDate=new Date(this.dateYear,this.dateMonth)
    this.refreshCombo(this.dateMonth,this.dateYear)
  }
  ngOnInit()
  {
    this.refreshCombo(this.calendar.activeDate.getMonth(),this.calendar.activeDate.getFullYear())
  }
  refreshCombo(month,year)
  {
     this.dateMonth=month;
     this.dateYear=year;
     const element=this.el.nativeElement.parentElement
     if (new Date(year,month,1).getDay()<=2)
      this.render.addClass(element,'removeRow')
     else
      this.render.removeClass(element,'removeRow')
  }

  /** Handles user clicks on the previous button. */
  customPrev(): void {
    this.previousClicked()
    this.refreshCombo(this.calendar.activeDate.getMonth(),this.calendar.activeDate.getFullYear());
  }

  /** Handles user clicks on the next button. */
  customNext(): void {
    this.nextClicked()
     this.refreshCombo(this.calendar.activeDate.getMonth(),this.calendar.activeDate.getFullYear());
 }