无法更改原始日历样式

Question

我为p日历组件使用primeng'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;
}

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