我正在使用PrimeNg日历在我的角7项目,想禁用月导航器在某些条件下的组件级。例如:当前月份是二月,我想在三月之后禁用月份导航器。
使用 :host和::ng-deep 可以覆盖CSS文件中的Primeng样式
:host ::ng-deep .ui-datepicker .ui-datepicker-header .ui-datepicker-next{
display:none;
}
但是我想在组件中更改样式。尝试了下面的代码,但没有工作
let datePickerNext = document.querySelectorAll('.ui-datepicker .ui-datepicker-header .ui-datepicker-prev');
datePickerNext.forEach(element => {
element.setAttribute("style", " margin-top: 0.6em;opacity: 0.2;");
});
有什么想法来实现这一点
2条答案
按热度按时间fcg9iug31#
你有没有想出一个解决方案?我在一个项目中有一个类似的用例,我的团队中有人想出了这个。它似乎可以在Chrome/Edge上工作。在你的TypeScript中,只需应用p-calendar上的一个或两个类(ui-datepicker-prev-disable或ui-datepicker-next-disable)。
我还为onMonthChange添加了一个事件处理程序,以防有人设法重新启用这些图标。
在HTML模板中,我添加了这个绑定。minMonth和maxMonth是在ngOnInit中设置的变量,它们基于minimumDate和maximumDate。
bqf10yzr2#
是的。它可以通过隐藏或模糊导航箭头来实现。需要使用onMonthChange,传递事件,基于事件应用CSS更改来隐藏导航箭头。
下面是代码:
超文本:
这里使用了onMonthChange,创建了一个函数,该函数将传递事件以动态应用CSS。
typescript :
CSS: