angular - 无法更改primeng日历样式

Question

我正在使用 primeng '7.0.0' 作为 p 日历组件。当我点击日期选择器图标时，日历组件向上打开（下图）。

我想减小这个组件的宽度和高度。我尝试了下面的代码，但没有奏效。

日历.html

<p-calendar
  value="#{property.propDate}" id="date"
  [showIcon]="true"
  [utc]='true'
  (onSelect)="sendCalendarTimeValueToParent()"
  placeholder="{{ timePickerPlaceHolder }}"
  [showTransitionOptions]="'100ms'"
  [hideTransitionOptions]="'100ms'"
  [inputStyle]="{ width: '100px' }"
  [(ngModel)]="value"
  [defaultDate]="defaultDate"
  showTime="true"
  [readonlyInput]="true"
  hourFormat="24"
  showButtonBar="true"
  [clearButtonStyleClass]="'clear-button'"
  [timeOnly]="true">
</p-calendar>

日历.css

.ui-calendar .ui-datepicker {
  height : 200px;
}

.ui-datepicker td span, .ui-datepicker td a {
  padding: 0px;
}

谁能告诉我我做错了什么？

Answer 1

我看过这个日历的css，我可以告诉你。

1.如果你想限制宽度，你可以在.ui-datepicker课堂上做，因为这是暴露的地方。你不能创造奇迹（因为一段时间后 css 会中断），但是有一些限制它的余地。

.ui-calendar .ui-datepicker {
  width: 15em;
}

2.你可以这样影响高度。该实现是使用伪 ::before 元素完成的，它们在计算中不占用任何空间。您需要它来限制所述元素的高度。我设法做的是以这种方式限制小时/分钟选择器的填充：

.ui-timepicker {
    padding: 0px !important;
}

通常，当内部元素占据标准高度而不是父元素的百分比时，您不能限制它们的高度。