无法更改启动日历样式

Question

我为p日历组件使用了'7.0.0'素数。当我单击日期选择器图标时，日历组件正在向上打开（如下图所示）。

我想减小此组件的宽度和高度。我尝试了下面的代码，但是没有用。

calendar.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>

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;
}

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