Angular 有没有办法定制角度日期选择器？

我需要在定制角度材料日期选择器方面的帮助，即，。

---

一旦我们点击日期，日历就不应该关闭。我应该能够有两个按钮，一个是“取消”，另一个是“保存”。单击“保存”按钮后，日历应关闭。

我不知道这是否是更好的解决方案，但基于此，我认为解决方案是使用带有日历的菜单

由于我们需要一个输入，我们至少需要两个函数，一个用于解析输入到日期对象的值，另一个用于在有日期对象时格式化输入的值

由于我希望这个“特殊”日期选择器能够以几种方式格式化日期，YYYY-MM-DD和DD/MM/YYYY我需要树变量

  placeHolder:string="DD/MM/YYYY"
  separator:string;
  order:number[]=[];

函数为我们提供了“分隔符和顺序”的值

因此，我们的函数解析和格式变得像

format(date:any)
  {
    if (!date)
      return null;
    const parts=[''+date.getFullYear(),
                 ("00" + (date.getMonth() + 1)).slice(-2),
                 ("00" + date.getDate()).slice(-2)]
    return parts[this.order[0]]+this.separator+
           parts[this.order[1]]+this.separator+
           parts[this.order[2]]
  }
  parse(value:string)
  {
   const parts=value?value.replace(/[.\/]/g,'-').split('-'):[]
   const date:any=(parts.length==3)?
        new Date(parts[this.order[0]]+'-'+parts[this.order[1]]+'-'+parts[this.order[2]]):
        null
   return date && date.getTime && date.getTime()?date:null
  }

下面的辅助函数（模糊）重新格式化了该值

  tryFormat(value:string)
  {
    const date=this.parse(value)
    this.date=date?this.format(date):value
  }

还有一个功能，当“菜单”打开时，允许更改进入ViewChild的日历的活动日期

@ViewChild('calendar',{static:false}) calendar:any
onOpen()
  {
    if (this.date)
    {
      const date=this.parse(this.date);
      if (date)
      {
        this.calendar.activeDate=date;
      }
    }
  }

最后，.html类似于

<mat-form-field class="example-full-width">
    <mat-label>Date</mat-label>
    <input matInput placeholder="{{placeHolder}}" [(ngModel)]="date" (blur)="tryFormat(date)" >
    <button matSuffix mat-icon-button [matMenuTriggerFor]="appMenu" (menuOpened)="onOpen()">
  <mat-icon>calendar_today</mat-icon>
</button>
  </mat-form-field>

<mat-menu #appMenu="matMenu" class="drop-calendar" >
    <div (click)="$event.stopPropagation()">
        <mat-calendar #calendar 
          (selectedChange)="date=format($event)" 
           [selected]="parse(date)">
        </mat-calendar>
    </div>
</mat-menu>

日期
今天的日历

---

完整的代码在

中，非常感谢！这就是我一直在寻找的解决方案：）

<mat-form-field class="example-full-width">
    <mat-label>Date</mat-label>
    <input matInput placeholder="{{placeHolder}}" [(ngModel)]="date" (blur)="tryFormat(date)" >
    <button matSuffix mat-icon-button [matMenuTriggerFor]="appMenu" (menuOpened)="onOpen()">
  <mat-icon>calendar_today</mat-icon>
</button>
  </mat-form-field>

<mat-menu #appMenu="matMenu" class="drop-calendar" >
    <div (click)="$event.stopPropagation()">
        <mat-calendar #calendar 
          (selectedChange)="date=format($event)" 
           [selected]="parse(date)">
        </mat-calendar>
    </div>
</mat-menu>