角材料日期选择器始终打开 [英] Angular material datepicker always open

问题描述

我想使用angular material datepicker作为控件来控制fullCalendar的一个实例.有没有办法强制它在特定的 div 中始终保持打开状态?我知道如何使用 bootstrap 或 jqueryUI 轻松完成，但我不想为我的项目添加额外的依赖项.

I would like to use the angular material datepicker as a widget to control an instance of fullCalendar. Is there a way to force it to stay alway open and in a particular div? I know how to do it easily with bootstrap or jqueryUI but I would not want to add an extra dependency to my project.

推荐答案

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

Well, you can get that to work with some CSS, but the internal scroll position of the month scroller starts always at the top (1932). md-calendar is the internal directive that renders the datepicker, so just use that.

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

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

And set the CSS to fixed size, which is usually calculated by the 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 控制器并在那里设置滚动位置.

But you can probably write your own directive that requires the mdCalendar controller and set the scroll position there.

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

这篇关于角材料日期选择器始终打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！