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

【问题标题】：Angular material datepicker always open角度材料日期选择器始终打开
【发布时间】：2018-07-20 04:34:36
【问题描述】：

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

【问题讨论】：

标签： angularjs fullcalendar angular-material

【解决方案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 issue

calendar.ts

【讨论】：

有没有办法突出显示选中的一天？如果我点击某一天我得到了事件但风格没有改变 - 它只是白色 ^^
@StefanFalk 我认为您的问题出在材料主题样式上。突出显示日正常工作，无需任何更改。

【解决方案2】：

好吧，你可以让它与一些 CSS 一起工作，但是月份滚动条的内部滚动位置总是从顶部开始（1932 年）。 md-calendar 是呈现日期选择器的内部指令，所以只需使用它。

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

并将 CSS 设置为固定大小，通常由 datepicker 计算。

.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

【讨论】：

如果，假设我希望宽度为 280 像素，该怎么办？只是将 340 更改为 280 是不行的..
我认为你不能低于 340 像素。
嗨，我在 md-dialog 内部使用相同的。是否有任何使用点击事件而不是滚动来切换月份或年份的方法？

【解决方案3】：

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

.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;
}

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

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

【讨论】：