我需要一个日期范围选择器与只有一年和一个月的角度材料选择器,但只有一个数据范围选择与MM/DD/YYYY - MM/DD/YYYY格式。我想要MM/YYYY - MM/YYYY格式的日期范围选择器。
它的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';
import * as _moment from 'moment';
import {default as _rollupMoment, Moment} from 'moment';
const moment = _rollupMoment || _moment;
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: [
{
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());
setMonthAndYear(normalizedMonthAndYear: Moment, datepicker: MatDatepicker<Moment>) {
const ctrlValue = this.date.value!;
ctrlValue.month(normalizedMonthAndYear.month());
ctrlValue.year(normalizedMonthAndYear.year());
this.date.setValue(ctrlValue);
datepicker.close();
}
}
HTML:
<mat-form-field appearance="fill">
<mat-label>Month and Year</mat-label>
<input matInput [matDatepicker]="dp" [formControl]="date">
<mat-hint>MM/YYYY</mat-hint>
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
<mat-datepicker #dp
startView="multi-year"
(monthSelected)="setMonthAndYear($event, dp)"
panelClass="example-month-picker">
</mat-datepicker>
</mat-form-field>
我不介意怎么做它的选择器
发布于 2022-06-23 05:50:27
您将在这里找到一个月/年选择器示例,https://material.angular.io/components/datepicker/examples#datepicker-views-selection。
您可以将其与范围选择器结合起来。
发布于 2022-06-23 06:18:10
只要做一点点工作和一些格式化,这是可能的。我们需要实现MY_FORMATS
将选定的日期格式化为MM/YYYY
。在(monthSelected)="chosenMonthHandler($event, dp)"
上,我们关闭datepicker datepicker.close();
以隐藏日期选择器视图。
export const MY_FORMATS = {
parse: {
dateInput: 'MM/YYYY',
},
display: {
dateInput: 'MM/YYYY',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
};
@Component({
selector: 'datepicker-views-selection-example',
templateUrl: 'datepicker-views-selection-example.html',
styleUrls: ['datepicker-views-selection-example.css'],
providers: [
{provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
{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();
}
}
工作示例:https://stackblitz.com/edit/angular-un1hfx?file=app%2Fdatepicker-views-selection-example.ts
灵感来源:https://material.angular.io/components/datepicker/examples#datepicker-views-selection
https://stackoverflow.com/questions/72725087
复制相似问题