[英]How to modify the primeng p-calendar style?
I am trying to modify the primeng p-calendar, but it is not working properly.我正在尝试修改primeng p-calendar,但它无法正常工作。
For example:例如:
I want it to be like this: required changes我希望它是这样的:需要更改
But original it looks like this: original image但原来它看起来像这样:原始图像
What i have tried so far:到目前为止我尝试过的:
HTML HTML
<div class="nxui-form-group">
<label for="planEndDate">
<img src="assets/images/calendar.svg" class="nxui-icon-small nxui-icon-align-bottom">
{{ 'i18n.all-damage-reports.label.plan-end-date' | translate }}
</label>
<p-calendar formControlName="planEndDate"
class="calendar-control"
id= "planEndDate"
[title]="'i18n.all-damage-reports.label.plan-end-date' | translate"
[dateFormat]="'i18n.common.dateformat.shortdate-p-calendar' | translate"
[locale]="'i18n.common.dateformat.calendar' | translate"
></p-calendar>
</div>
CSS CSS
p-calendar.calendar-control {
opacity: 1;
color: black;
background: #eeeeee;
}
looking forward to inputs.期待输入。
Thanks谢谢
I think that you should use the special selectors of angular to change a component style like :host or ::ng-need, you can check that in the official documentation:我认为您应该使用 angular 的特殊选择器来更改 :host 或 ::ng-need 之类的组件样式,您可以在官方文档中查看:
https://angular.io/guide/component-styles https://angular.io/guide/component-styles
::ng-deep body .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
margin: 0;
padding: 0;
line-height: 1;
color: goldenrod;
}
::ng-deep .ui-datepicker .ui-datepicker-group {
background-color: cadetblue;
}
Hope that'll help you !希望能帮到你!
In my case, I want to style the calendar icon, html is below就我而言,我想设置日历图标的样式,html 在下面
<div class="main-container">
<p-calendar showTime="true" hourFormat="12" [showIcon]="true"></p-calendar>
</div>
Then I added style below but it is not working:然后我在下面添加了样式,但它不起作用:
.main-container ::ng-deep .ui-datepicker-trigger.ui-button {
// add style here
}
Then I added p-calendar
after ::ng-deep
it worked然后我在
::ng-deep
它工作之后添加了p-calendar
.main-container ::ng-deep p-calendar .ui-datepicker-trigger.ui-button {
// add style here
}
Select element class via using Inspect then add ::ng-deep selector to force style on child components
通过使用 Inspect 选择元素类,然后添加::ng-deep选择器以强制子组件的样式
::ng-deep .ui-inputtext { /* Example */ opacity: 1 !important; }
Did you try to change the styling classes?您是否尝试更改样式类? See https://www.primefaces.org/primeng/#/calendar (section styling)
请参阅https://www.primefaces.org/primeng/#/calendar (部分样式)
Like for example例如
.ui-calendar .ui-inputtext {
// place text styling here
}
The code you see in the templates is not what actually is in browser's DOM.您在模板中看到的代码并不是浏览器 DOM 中的实际代码。 There are some other elements injected, like
<input>
for text input.还有一些其他元素被注入,比如
<input>
用于文本输入。
Try something like尝试类似的东西
p-calendar.calendar-control input {
border: 1px solid black;
background: #eeeeee;
}
And anyway, look at the actual elements in your browser with Inspect Element and write CSS according to the real situation.无论如何,使用Inspect Element查看浏览器中的实际元素并根据实际情况编写CSS。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.