禁用Typescript中的PrimeNG日历月份选择

xcitsw88  于 2022-12-19  发布在  TypeScript
关注(0)|答案(2)|浏览(148)

我正在使用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;");
});

有什么想法来实现这一点

fcg9iug3

fcg9iug31#

你有没有想出一个解决方案?我在一个项目中有一个类似的用例,我的团队中有人想出了这个。它似乎可以在Chrome/Edge上工作。在你的TypeScript中,只需应用p-calendar上的一个或两个类(ui-datepicker-prev-disable或ui-datepicker-next-disable)。

:host ::ng-deep p-calendar.ui-datepicker-next-disable .ui-datepicker .ui-datepicker-header .ui-datepicker-next {
  color: #dddddd !important;
  pointer-events: none;
}

:host ::ng-deep p-calendar.ui-datepicker-prev-disable .ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
  color: #dddddd !important;
  pointer-events: none;
}

我还为onMonthChange添加了一个事件处理程序,以防有人设法重新启用这些图标。
在HTML模板中,我添加了这个绑定。minMonth和maxMonth是在ngOnInit中设置的变量,它们基于minimumDate和maximumDate。

<p-calendar #calendar
   [ngClass]="{
     'ui-datepicker-prev-disable': calendar.currentMonth === minMonth, 
      'ui-datepicker-next-disable': calendar.currentMonth === maxMonth}"
bqf10yzr

bqf10yzr2#

是的。它可以通过隐藏或模糊导航箭头来实现。需要使用onMonthChange,传递事件,基于事件应用CSS更改来隐藏导航箭头。

下面是代码:
超文本:

<p-calendar [(ngModel)]="date4" [minDate]="minDate" [maxDate]="maxDate" 
    [readonlyInput]="true" inputId="min-max" 
    (onMonthChange)="disableDatePickerPrev($event)"
    [ngClass]="{'disable-datepicker-prev': disabled}">
</p-calendar>

这里使用了onMonthChange,创建了一个函数,该函数将传递事件以动态应用CSS。
typescript :

disabled:boolean = false;
disableDatePickerPrev(evt){
    // current month december =12
    // disable prev month navigation for october =10
    // can set month value dynamically
    if(evt.month <= 10) this.disabled=true;
}

CSS:

p-calendar.disable-datepicker-prev ::ng-deep .p-datepicker-prev {
    display: none;
}

相关问题