Question

我希望我的棱角材料日期选择器仅显示月份/年份。没有天。

这是我的约会选择器：

<mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

我看到以前的线程声明将模式设置为：

md-mode="month"

以上内容不再起作用。现在有什么解决方案？

Answer 1

这是对我有用的代码。我看到您正在尝试类似的操作。希望对您有所帮助。

.html文件：

<mat-form-field>
    <input matInput [matDatepicker]="dp2" [min]="sixMonthsAgo" [max]="today" placeholder="Select a Date" (click)="openDatePicker(dp2)">
    <mat-datepicker-toggle matSuffix [for]="dp2"></mat-datepicker-toggle>
    <mat-datepicker #dp2 startView="multi-year" (monthSelected)="closeDatePicker($event, dp2)"></mat-datepicker>
  </mat-form-field>

.ts文件中的摘录：

  this.today = new Date();
  this.sixMonthsAgo = new Date();
  this.sixMonthsAgo.setMonth(this.today.getMonth() - 6);

  openDatePicker(dp) {
    dp.open();
  }

  closeDatePicker(eventData: any, dp?:any) {
    // get month and year from eventData and close datepicker, thus not allowing user to select date
    dp.close();    
  }

Answer 2

要求在输入元素上显示“MMMM YYYY”格式。 “MMMM YYYY”格式为“月年”。想要创建自定义日期格式并应用于 mat-datepicker。

在 HTML 中

<mat-label>For the Month</mat-label>
<input matInput [matDatepicker]="picker1" name="CalMonth" formControlName="CalMonth">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1 disabled="false"></mat-datepicker>

在 .ts 打字稿中

想要导入 material-moment-adapter ，material/core 和瞬间

安装材料力矩适配器

<块引用>

npm i @angular/material-moment-adapter

<块引用>

npm i 角力矩

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 * as moment from 'moment';

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL', 
  },
  display: {
    dateInput: 'MMMM YYYY', // this is the format showing on the input element
    monthYearLabel: 'MMMM YYYY', // this is showing on the calendar 
  },
};

然后添加到组件

@Component({
  selector: 'app-monthselector',
  templateUrl: './monthselector.component.html',
  styleUrls: ['./monthselector.component.scss'],
  providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})

然后将格式添加到相关控制器

this.UIForm = new FormGroup({
      CalMonth: new FormControl(moment()),
    });

按照上面的步骤一步一步来，您可以自定义日期格式为“月年”。

您也可以更改任何其他日期格式，仅更改此

<块引用>

dateInput: 'MMMM YYYY',

谢谢，

英迪卡·普拉迪普

Answer 3

在这里，您可以从Angular Material网站获得如何操作：

https://material.angular.io/components/datepicker/overview#watching-the-views-for-changes-on-selected-years-and-months

Answer 4

.html 中的代码

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

.ts 中的代码

import {MatDatepicker} from '@angular/material/datepicker';


 @ViewChild('picker') datePickerElement = MatDatepicker;

  ngOnInit() {
    console.log(this.datePickerElement) 
    console.log(this.datePickerElement['opened'])  
   
    setTimeout(() => {
          this.datePickerElement['_datepickerInput']._dateFormats = {
  parse: {
    dateInput: 'LL', 
  },
  display: {
    dateInput: 'MMMM YYYY',
    monthYearLabel: 'MMMM YYYY', 
  },
};
    },1000)


  }

这对我来说很好用。日期格式将显示如下截图

角材料Datepicker-仅月份和年份

4 个答案: