DatePicker меняет представление в пользовательском заголовке - PullRequest
Новая
       25

DatePicker меняет представление в пользовательском заголовке

0 голосов
/ 27 декабря 2018

Я использую DatePicker из Angular Material с настраиваемым заголовком и хотел бы добавить кнопку в свой заголовок DatePicker, позволяющую мне перейти к многолетнему представлению DatePicker.

Я пыталсяизмените startView, но это только изменит представление, когда я начну выбор DatePicker.

К сожалению, нет функции, позволяющей выбрать представление DatePicker.

HTML: 

<mat-form-field class="px-3">
  <input matInput [matDatepicker]="datePicker"
                  placeholder="Sélectionnez une période"
                  formControlName="selectedPeriod"
                  readonly
                  [min]="minDate" [max]="maxDate"
                  [matDatepickerFilter]="filterDate">
  <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
  <mat-datepicker #datePicker touchUi
                  startView="multi-year"
                  (yearSelected)="chosenYearHandler($event)"
                  (monthSelected)="chosenMonthHandler($event, datePicker)"
                  [calendarHeaderComponent]="exampleHeader">
  </mat-datepicker>
</mat-form-field>

Заголовок средства выбора даты: 

<div class="example-header">
 <button mat-icon-button class="example-double-arrow" 
         (click)="previousClicked()">
   <mat-icon>arrow_back</mat-icon>
 </button>
 <span class="example-header-label">{{periodLabel}}</span>
 <button mat-icon-button class="example-double-arrow" 
         (click)="closeClicked()">
   <mat-icon>close</mat-icon>
 </button>


export class ExampleHeader<Moment> implements OnDestroy {

 private destroyed = new Subject<void>();
 @ViewChildren('datePicker') datePicker: MatDatepicker<Moment>;

 constructor(@Host() private calendar: MatCalendar<Moment>,
          private dateAdapter: DateAdapter<Moment>,
          private datepicker: MatDatepicker<Moment>,
          @Inject(MAT_DATE_FORMATS) private dateFormats: MatDateFormats,
          cdr: ChangeDetectorRef) {
              calendar.stateChanges
                  .pipe(takeUntil(this.destroyed))
                  .subscribe(() => cdr.markForCheck()); }

ngOnDestroy() {
  this.destroyed.next();
  this.destroyed.complete();
}

get periodLabel() {
  return this.dateAdapter
    .format(this.calendar.activeDate, this.dateFormats.display.monthYearA11yLabel)
    .toLocaleUpperCase();
}

//Back to the "multi-year" view of the datePicker
previousClicked() {
  this.datepicker.startView="multi-year"; //Does not match the demand
}

closeClicked() {
  this.datepicker.close();
}}

DEMO:

enter image description here

Как и в демоверсии, я хотел бы вернуться к предыдущему виду.

Я сделал StackBlitz ЗДЕСЬ для моего datePicker.(Л.214)

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

Спасибо, Фабиан Кюнг!

Вот результат и код:

enter image description here

  previousViewClicked() {
    this.calendar.currentView = 'multi-year';
  }

  previousMultiYearClicked(mode: 'year') {
    this.calendar.activeDate = mode === 'year' ?
        this.dateAdapter.addCalendarYears(this.calendar.activeDate, -10) : null;
  }

  nextMultiYearClicked(mode: 'year') {
    this.calendar.activeDate = mode === 'year' ?
        this.dateAdapter.addCalendarYears(this.calendar.activeDate, 10) : null;
  }

StackBlitzЗДЕСЬ

0 голосов
/ 27 декабря 2018

Вам нужно изменить его на следующее: 

previousClicked() {
  this.calendar.currentView = 'multi-year';
}

См. этот стекблиц для рабочего примера.

...