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

问题描述：

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

答

那么，你可以得到一些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

如果让我们说我希望宽度为280px，该怎么办？只是将340改为280并不是在做伎俩.. – Billy

我不认为你可以低于340px。 – kuhnroyal

嗨，我在'md-dialog'中使用了相同的内容。是否有任何切换使用点击事件而不是滚动的月份或年份？ – user2518430

答

上@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; 
}

例如，将宽度设置为280px。只要确定你也设置了选择指标。

我想要的高度也是240px，因此我将滚动蒙版的高度设置为240px。

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

相关推荐