Angular material 日期选择器始终打开

Question

我想使用 angular material 日期选择器作为小部件来控制 fullCalendar 的实例。有没有办法强制它在特定的 div 中始终保持打开状态？我知道如何使用 bootstrap 或 jqueryUI 轻松完成此操作，但我不想向我的项目添加额外的依赖项。

Answer 1

好吧，您可以使用一些 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

Answer 2

跟进@kuhnroyal 他的回答。如果你想低于 340 像素的宽度，你可以执行以下操作：

.time-date {
  font-size: 12px !important;
}
.fixed-calendar {
  width: 280px;
  height: 285px;
  display: block;
}

.fixed-calendar .md-calendar-scroll-mask {
  width: 280px !important;
  height: 240px !important;
}

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

.fixed-calendar .md-calendar-date-selection-indicator {
  width: 35px;
  height: 35px;
  line-height: 35px;
}

例如，将宽度设置为 280px。请确保您也设置了选择指示器。

我也希望高度为 240px，因此我将滚动遮罩的高度设置为 240px。

Answer 3

正在开发 angular 版本 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 issue

calendar.ts

Angular material 日期选择器始终打开

Angular material datepicker always open

angularjs

fullcalendar

angular-material