Angular 没有日期选择的日期选择器（只有月份和年份）

Question

我有问题。我想将 date-picker 用于 Angular 表格，但我只需要 select 年和月，没必要select的日子。这样做的简单方法是什么？我还想知道如何将年份和月份分别保存到 .ts 文件中。

Answer 1

HTML:

<mat-form-field>
  <input #dpInput matInput [matDatepicker]="dp" placeholder="datepicker" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
  <mat-datepicker #dp (monthSelected)="monthSelected($event, dp, dpInput)" startView="multi-year"></mat-datepicker>
</mat-form-field>

ts:

@Component({
  selector: 'datepicker-example',
  templateUrl: 'datepicker-example.component.html',
  styleUrls: ['datepicker-example.component.css'],
})
export class DatepickerFormatsExampleComponent {
  date = new FormControl(moment());

  monthSelected(event, dp, input) {
    dp.close();
    input.value = event.toISOString().split('-').join('/').substr(0, 7);
  }
}

monthSelected 函数将获取 datePicker 和输入引用，并将提取所选数据并设置输入值。

对于问题的另一部分，您可以使用 monthSelected 和 yearSelected 事件，但它们会传递整个日期。您可以做的是通过以下方式提取这些日期对象的数量：

const array = event.toISOString().split('-');
const year = array[0];
const month = array[1];

Angular 没有日期选择的日期选择器（只有月份和年份）

Angular date-picker without day selection (only month and year)

angular

datepicker