При выборе даты, как я могу держать открытую кнопку выбора даты? - PullRequest
Новая
       19

При выборе даты, как я могу держать открытую кнопку выбора даты?

0 голосов
/ 18 октября 2018

У меня есть приложение Angular 4.x, в котором используется Angular Material Datepicker (package.json показывает это как "@angular/material": "^2.0.0-beta.12") - у меня это работает нормально, но мне требуется возможность выбрать дату и оставить ее открытой -эта функциональность доступна в следующей версии Angular Material (v5.0.0), однако это также будет означать обновление самой версии Angular с 4 до 5 (что мы в настоящее время не можем сделать)

Как я могу изменить код, чтобы разрешить мне либо: а) держать средство выбора даты открытым даже после того, как был сделан выбор даты, ИЛИ b) после того, как выбор даты был сделан, немедленно повторно открыть средство выбора даты - возможно ли это с помощью этой более старой версииматериал

https://stackblitz.com/edit/angular-ysspzm-bz2ezu?file=app/datepicker-overview-example.ts

// Компонент HTML 

<mat-datepicker-toggle
        matSuffix
        [for]="picker">
</mat-datepicker-toggle>

<mat-datepicker
        #picker
        class="fixed-open"
        opened="true">
</mat-datepicker>

// Добавлен импорт пользовательских компонентов Datepicker здесь ... 

@Component({
  selector: 'app-datepicker',
  templateUrl: './datepicker.component.html',
  styleUrls: ['./datepicker.component.scss']
})

export class DatepickerComponent {
  @ViewChild('keepOpen') _input: ElementRef;

  _openCalendar(picker: MatDatepicker<Date>) {
      picker.open();
  }
}

// datepicker.d.ts из каталога node_modules (я использую код ниже в ссылке для вставки) https://pastebin.com/ChYBmpU6

1 Ответ

0 голосов
/ 18 октября 2018

Похоже, что это работает при изменении даты, вы можете изменить его на любой тип события.

Компонент 

 @ViewChild('picker') picker;

  _openCalendar() {
   setTimeout(()=>this.picker.open());
  }

HTML 

<input 
      matInput 
      [matDatepicker]="picker" 
      placeholder="Choose a date" 
      (dateChange)="_openCalendar()"
      #keepOpen>
...