针对季度报告的Angular 5+物料日期选择器

时间:2018-05-30 06:40:51

标签: angular angular-material

我需要一个代码来自定义角度素材日期选择器,以下面的格式显示。

enter image description here

我需要以角度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;
}

0 个答案:

没有答案