Угловой материал DatePicker ручной открытый

Question

Угловой материал DatePicker ручной открытый

1

В документации datepicker есть пример того, как всплывающий календарь управляется программно с помощью методов open() и close():

<mat-form-field class="example-full-width">
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>

Можно также установить opened свойство true/false следующим образом:

<button mat-raised-button (click)="picker.opened = true">Open</button>

Интересно, есть ли в любом случае использовать это, чтобы всплывающее окно в календаре оставалось навсегда открытым для того, чтобы позволить клику нажимать на разные даты и отображать этот выбор во входном?

MadCatm2 11 дек. 2017, в 22:14

Источник

0

Вы можете реализовать передатчик dateChange, чтобы заново открывать средство выбора даты, когда выбрана дата.
Mehdi 11 дек. 2017, в 21:32
0

эххх, понятно. Не могли бы вы помочь мне с некоторыми деталями реализации?
MadCatm2 11 дек. 2017, в 21:50

Теги:

angular

javascript

datepicker

angular-material

2 ответа

0

Встроенный элемент управления DatePicker библиотеки материалов поставляется с внутренним компонентом Calendar. Вы можете использовать следующее, чтобы иметь календарь, который всегда открыт (без поля ввода, но все еще работает с выбором даты/месяца/года)

Узнайте больше о календаре здесь:

https://onthecode.co.uk/angular-material-calendar-component/

Umut Esen 04 фев. 2019, в 07:07

Ещё вопросы

Вы можете реализовать передатчик dateChange, чтобы заново открывать средство выбора даты, когда выбрана дата.
эххх, понятно. Не могли бы вы помочь мне с некоторыми деталями реализации?

Mehdi · Accepted Answer · 2017-12-11T19-39-00.000Z

Я думаю, вы можете попробовать это:

<mat-form-field class="example-full-width">
  <input matInput (dateChange)="reOpenCalendar()" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>

в вашем файле ts/js компонента вам нужно объявить новый метод:

export class YourComponent{
   @ViewChild('picker') picker;
   //....
   reOpenCalendar(){
     let self = this;
        setTimeout(
            ()=>{                
                self.picker.open();
            },
            50
        );
   }
}

Это приведет к внезапному эффекту, когда сборщик дат исчезнет и быстро появится.

Другим решением будет компонент datepicker fork angular material в вашем локальном проекте и ввести свойство Input, чтобы отключить закрытие при выборе даты

Я применил источник dateChange() к примеру stackblitz в официальных документах, и он все еще закрывает всплывающее окно, когда я выбираю дату: /. Хотелось бы, чтобы документация была немного лучше ... Я даже не знал, что есть источник DateChange. Может быть, мне нужен фактический виджет для этого требования, а не использование DatePicker материала.
Я переместил эмиттер во входной тег, так как он должен идти туда. Тайм-аут метода должен позволить Angular выполнить обнаружение изменений в событии с выбранной датой и только затем повторно открыть средство выбора даты.
Гениальный! Жаль насчет мерцания :(