角度 7 中的部分日期选择器答案

【问题标题】：Partial date picker in angular 7角度 7 中的部分日期选择器
【发布时间】：2019-07-05 22:34:16
【问题描述】：

我正在使用 Angular 7 并且我正在搜索可以支持部分日期的组件我需要一些日期选择器，用户只能选择年份或年份和月份或年份月份和日期（全天）例如，如果用户只想选择年份：

我尝试搜索有角度的材料，但没有找到任何东西。

有人知道这样的组件吗？

谢谢！

【问题讨论】：

Angular Material 的 Datepicker 可以根据需要进行自定义。只要看看DateAdapter 。在material.angular.io/components/datepicker/overview 部分查看更多信息Choosing a date implementation and date format settings

标签： angular date datepicker angular7 partial

【解决方案1】：

我认为 Angular Material 是你的首选，有很多选择可以让它按你的方式工作。这只是您如何做到这一点的一个示例。一切都来自文档：https://material.angular.io/components/datepicker/overview

<mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date" [formControl]="date" > 
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker  
    startView="multi-year"
    [startAt]="startDate"
    (yearSelected)="chosenYearHandler($event)"
    (monthSelected)="chosenMonthHandler($event, dp)">
  </mat-datepicker>
</mat-form-field>

和功能

    date = new FormControl(new Date());

  chosenYearHandler(Year) {   
    this.date.setValue(Year);
  }
  chosenMonthHandler(Month) {
    this.date.setValue(Month);
  }

我建议您再次阅读文档并重新考虑可以使用日期选择器执行的选项。祝你好运！

【讨论】：

我找到了这个例子：stackblitz.com/edit/angular-mulitdate-picker-demo 但我需要一个将这三个组合在一起的选择器。因此用户可以选择年份并接受，或年份和月份或完整日期。
当您在我的示例中单击年份时，它会存储单击的年份，您可以关闭选择器。对于月份，首先选择年份，然后选择月份，然后保存年份和月份。您只需制作一个按钮即可关闭它。