Javascript 角度材质日期选择器设置为用作日期或月份

我在angular 8应用程序中使用angular material datepicker，我想知道它是否可以用作日期选择器和月份选择器。我的意思是用户可以在同一个日期选择器中选择日期/月/年或仅选择月/年。文档中没有提到在同一日期选择器中使用这两个变体。有人能帮忙吗？这是我使用日期/月/年的代码。也可以更改为使用月/年吗

<mat-form-field>
    <input matInput [max]="maxDate"
        [matDatepicker]="picker" 
        [(ngModel)]="companyModel.incorporationDate"
        #incorporationDate="ngModel"
        incorporationDate>
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker disabled="false"></mat-datepicker>
</mat-form-field>

---

直接从角材料开始

年月

在TS文件中：

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
import {MatDatepicker} from '@angular/material/datepicker';

// Depending on whether rollup is used, moment needs to be imported differently.
// Since Moment.js doesn't have a default export, we normally need to import using the `* as`
// syntax. However, rollup creates a synthetic default module and we thus need to import it using
// the `default as` syntax.
import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
import {default as _rollupMoment, Moment} from 'moment';

const moment = _rollupMoment || _moment;

// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_FORMATS = {
  parse: {
    dateInput: 'MM/YYYY',
  },
  display: {
    dateInput: 'MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

/** @title Datepicker emulating a Year and month picker */
@Component({
  selector: 'datepicker-views-selection-example',
  templateUrl: 'datepicker-views-selection-example.html',
  styleUrls: ['datepicker-views-selection-example.css'],
  providers: [
    // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
    // application's root module. We provide it at the component level here, due to limitations of
    // our example generation script.
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})
export class DatepickerViewsSelectionExample {
  date = new FormControl(moment());

  chosenYearHandler(normalizedYear: Moment) {
    const ctrlValue = this.date.value;
    ctrlValue.year(normalizedYear.year());
    this.date.setValue(ctrlValue);
  }

  chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
    const ctrlValue = this.date.value;
    ctrlValue.month(normalizedMonth.month());
    this.date.setValue(ctrlValue);
    datepicker.close();
  }
}

从'@angular/core'导入{Component}；
从'@angular/forms'导入{FormControl}；
从“@angular/material MOMENT ADAPTER”导入{MomentDateAdapter，MAT_MOMENT_DATE_ADAPTER_OPTIONS}；
从“@angular/material/core”导入{DateAdapter，MAT_DATE_格式，MAT_DATE_LOCALE}；
从'@angular/material/datepicker'导入{MatDatepicker}；
//根据是否使用汇总，需要以不同方式导入力矩。
//由于矩.js没有默认的导出，我们通常需要使用“*”作为`
//语法。然而，rollup创建了一个合成的默认模块，因此我们需要使用
//'defaultas'语法。
从“时刻”导入*作为“时刻”；
//tslint:禁用下一行：无重复导入
从“矩”导入{默认为_rollupmonent，矩}；
常数矩=|汇总矩| | |矩；
//有关这些格式的含义，请参见Moment.js文档：
// https://momentjs.com/docs/#/displaying/format/
导出常量MY_格式={
解析：{
dateInput:'MM/YYYY'，
},
显示：{
dateInput:'MM/YYYY'，
monthYearLabel:“MMM YYYY”，
dateA11yLabel:'LL'，
Monthyear11ylabel:'MMMM YYYY'，
},
};
/**@title日期选择器模拟年份和月份选择器*/
@组成部分({
选择器：“datepicker视图选择示例”，
templateUrl:'datepicker查看选择示例.html'，
样式URL:['datepicker-views-selection-example.css']，
供应商：[
//“MomentDateAdapter”可以通过在应用程序中导入“MomentDateModule”自动提供
//应用程序的根模块。由于
//我们的示例生成脚本。
{
提供：日期适配器，
useClass:MomentDateAdapter，
deps:[材料日期、材料地点、材料时刻、材料日期、适配器选项]
},
{提供：MAT_DATE_FORMATS，useValue:MY_FORMATS}，
],
})
导出类DatePickerViewSelectionExample{
日期=新表单控件（矩（））；
chosenYearHandler（标准化年份：时刻）{
const ctrlValue=this.date.value；
ctrlValue.year（normalizedYear.year（））；
此.date.setValue（ctrlValue）；
}
chosenMonthHandler（标准化月份：时刻，日期选择器：MatDatepicker）{
const ctrlValue=this.date.value；
ctrlValue.month（normalizedMonth.month（））；
此.date.setValue（ctrlValue）；
datepicker.close（）；
}
}

在您的情况下，所选月份处理程序可能如下所示：

chosenMonthHandler（normlizedMonth:Moment，datepicker:MatDatepicker）{
const month=时刻（normlized month）.month（）；
const date=时刻（this.date.value）；
const ctrlValue=新日期（Date.year（），month）；
此.date.patchValue（ctrlValue）；
}

因此，您可以同时具有两种行为，例如月份和日期选择器。 祝你好运

在stackblitz上玩吧

---

和在线编辑器

感谢您的帮助，andres，但这将只提供选择月/年的选项。它不会提供选择日期/月/年的选项。您可以通过这种方式进行任何行为。与stackbliz一起玩：编辑在这里嘿，Andres，你的stackbliz不允许我只选择月份和年份。我必须选择一个日期。那是我不想要的。我想让日期选择器让我只选择月和年或日期，月和年好吧，所以我添加了一个滑动切换开关来切换行为，这就是你想要的吗？

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
import {MatDatepicker} from '@angular/material/datepicker';

// Depending on whether rollup is used, moment needs to be imported differently.
// Since Moment.js doesn't have a default export, we normally need to import using the `* as`
// syntax. However, rollup creates a synthetic default module and we thus need to import it using
// the `default as` syntax.
import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
import {default as _rollupMoment, Moment} from 'moment';

const moment = _rollupMoment || _moment;

// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_FORMATS = {
  parse: {
    dateInput: 'MM/YYYY',
  },
  display: {
    dateInput: 'MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

/** @title Datepicker emulating a Year and month picker */
@Component({
  selector: 'datepicker-views-selection-example',
  templateUrl: 'datepicker-views-selection-example.html',
  styleUrls: ['datepicker-views-selection-example.css'],
  providers: [
    // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
    // application's root module. We provide it at the component level here, due to limitations of
    // our example generation script.
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})
export class DatepickerViewsSelectionExample {
  date = new FormControl(moment());

  chosenYearHandler(normalizedYear: Moment) {
    const ctrlValue = this.date.value;
    ctrlValue.year(normalizedYear.year());
    this.date.setValue(ctrlValue);
  }

  chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
    const ctrlValue = this.date.value;
    ctrlValue.month(normalizedMonth.month());
    this.date.setValue(ctrlValue);
    datepicker.close();
  }
}