我需要一个代码来自定义角度素材日期选择器,以下面的格式显示。
我需要以角度5来实现,我甚至可以选择第一年和第四季度。请有人帮帮我
[编辑]我无法达到以下版本。我试图禁用其他几个月并且只显示每个季度的开始月份,例如JAN,APR ..
代码是
<div id = "quarterPicker" class="innerContainer well-sm" [hidden]="isQuarterHidden">
<app-custom-date-picker mode="QUARTER" label="Report Start quarter" i18n-label=@@reportstartQuarter [(ngModel)]="chosenQarterDate" (ngModelChange)="kpiDateChanged($event,'quarter')"></app-custom-date-picker><br>
</div>
- 在自定义日期选择器
中 export class CustomDatepickerComponent implements ControlValueAccessor, AfterViewInit, OnDestroy {
@Input() mode: 'YEAR' | 'MONTH' | 'MONTHYEAR' | 'WEEK' | 'QUARTER' | '' | null;
@Input() label = '';
@Input() max: any;
@Input() min: any;
@Input() touchUi = false;
_yearPickerCtrl: FormControl = new FormControl();
_monthPickerCtrl: FormControl = new FormControl();
_regularPickerCtrl: FormControl = new FormControl();
private _onDestroy: Subject<void> = new Subject<void>();
ngAfterViewInit() {
switch (this.mode) {
case 'YEAR':
this._subscribeToChanges(this._yearPickerCtrl);
break;
case 'MONTH':
case 'QUARTER':
case 'MONTHYEAR':
this._subscribeToChanges(this._monthPickerCtrl);
break;
default:
this._subscribeToChanges(this._regularPickerCtrl);
}
}
- 在monthPicker.ts
private _setupFilter() {
switch (this.mode) {
case 'QUARTER':
this._customFilter = (d: Moment) => {
return d.month() === 0 || d.month() === 3 || d.month() === 6 || d.month() === 9;
};
break;
}