更改 primeng 日历中时间选择器的样式

Question

我正在尝试删除填充并将字体样式设置为更小的时间选择器，用于 angular 7 的 primeng 日历。

<p-calendar [ngModel]="xxx" timeOnly="true" [(hourFormat)]="hourFormat" [(dateFormat)]="timeFormat" [showIcon]="false"
  [style]="{'display':'initial'}" [inputStyle]="{'border-width':'1px 1px 1px 1px', 'width':'100%','height':'25px'}"></p-calendar>

但它不适用。

这是为那个盒子 html class 渲染的

class="ui-timepicker ui-widget-header ui-corner-all ng-tns-c9-1 ng-star-inserted"

我试过了

::ng-deep .ui-timepicker .ui-widget-header{
padding:initial;
font-size:smaller;
}

和

::ng-deep .ui-timepicker.ui-widget-header{
padding:initial;
font-size:smaller;
}

无效。任何线索都会有所帮助。谢谢。

Answer 1

::ng-deep .ui-timepicker.ui-widget-header{
  padding:initial;
  font-size:smaller;
}

实际有效，字体变小了，但是padding还是一样的，因为primeng有：

body .ui-datepicker .ui-timepicker {
    border: 0 none;
    border-top: 1px solid #d8dae2;
    padding: 0.857em;
}

比你的风格更具体。

您可以增加样式的特异性：

::ng-deep div.ui-datepicker .ui-timepicker{
  padding:initial;
  font-size:smaller;
}

Stackblitz demo

更改 primeng 日历中时间选择器的样式

Change style of time picker in primeng calendar

css

primeng

angular

primeng-calendar