角材料日期选择器始终打开

Question

我想使用有角材质的datepicker作为控件来控制fullCalendar实例的小部件。有没有办法强迫它始终保持打开状态并在特定的div中？我知道如何使用bootstrap或jqueryUI轻松地做到这一点，但我不想为我的项目添加额外的依赖项。

Answer 1

它在角度版本6.x上工作

<mat-calendar [selected]="selectedDate" 
(selectedChange)="selectedChange($event)" 
(yearSelected)="yearSelected()" 
(monthSelected)="monthSelected()" 
(_userSelection)="userSelection()" 
(cdkAutofill)="cdkAutofill()">
</mat-calendar>

当前所选日期更改时发出

readonly selectedChange: EventEmitter<D>;

退出在多年视图中选择的年份。这不仅是所选日期的更改

readonly yearSelected: EventEmitter<D>;

退出在年视图中选择的月份。这不仅是所选日期的更改

readonly monthSelected: EventEmitter<D>;

选择任何日期时发出

readonly _userSelection: EventEmitter<void>;

但仍然缺少一些必要的事件，例如下一个和上一个按钮的事件

img

GitHub问题

calendar.ts

Answer 2

好吧，您可以使用一些 CSS 来实现它，但是月份滚动条的内部滚动位置始终从顶部 (1932) 开始。 md-calendar是呈现日期选择器的内部指令，所以只需使用它。

<md-calendar class="fixed-calendar" ng-model="myDate"></md-calendar>

并将CSS设置为固定大小，通常由日期选择器计算。

.fixed-calendar {
  width: 340px;
  height: 340px;
  display: block;
}

.fixed-calendar .md-calendar-scroll-mask {
  width: 340px !important;
}

.fixed-calendar .md-virtual-repeat-scroller {
  width: 340px !important;
  height: 308px;
}

但是您可能可以编写自己的指令，该指令需要mdCalendar控制器并在那里设置滚动位置。

http://codepen.io/kuhnroyal/pen/EPQpGE