Angular Material日期选择器始终打开

Question

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

- Mika

Answer 1

它适用于 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问题

calendar.ts

- Saeed El Dah

---

有没有办法在选中某一天时突出显示它？如果我点击某一天，我可以看到事件，但样式不会改变 - 它仍然是白色的 ^^ - Stefan Falk

@StefanFalk 我认为你的问题来自于材料主题样式。高亮显示日期在没有任何更改的情况下正常工作。 - Saeed El Dah

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

- kuhnroyal

---

如果我想让宽度为280像素怎么办？仅仅将340改为280并不能解决问题。 - Billy

我认为你不能低于340像素。 - kuhnroyal

嗨，我正在使用md-dialog内部相同的内容。是否有任何方法可以通过单击事件而不是滚动来切换月份或年份？ - Anil Kumar Pandey

Answer 3

继续@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。

- Billy