Question

我正在使用一棵表树中的primeng的p-calendar。如何使p日历字段的大小与其所在的单元格相同？还是一般来说-如何使其尺寸与父级div相同？

您可以使用style和inputStyle使它以绝对宽度工作-但我的表可以调整大小-因此在这种情况下它不起作用。我在推荐的地方尝试过：

'$source'

但这不起作用，因为日期选择器的按钮具有固定的大小。

在我看来，这是一个非常基本的要求-能够使组件的尺寸与其父组件相同。真的很惊讶，这行不通。

谢谢，迈克尔

Answer 1

这对我有用：

<p-calendar [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [timeOnly]="true"></p-calendar>

Answer 2

我在下面尝试实现这一目标：

添加您自己的类以覆盖日期容器的CSS。当我添加class =“ treetableDate”

    <p-calendar [(ngModel)]="date1" 
[style]="{'width':'70%'}" [inputStyle]="{'width':'70%'}" class="treetableDate"></p-calendar>

现在覆盖日历组件的CSS。如下所示：

.treetableDate .ui-widget-content{
    width: 80%; // or in pixel depends how much width you want.
}

注意：请勿直接覆盖.ui-widget-content。否则，它将影响应用程序中每个组件的宽度。使用您自己的类，它将仅影响该特定元素。

Answer 3

问题是appendTo =“ body”，它更改了monthpicker的上下文。要修复，我在appendTo中使用了div。

Answer 4

我遇到了一个问题，我看到日历弹出窗口继承了它所在列的宽度（我将它用于 p 表上的列过滤器），因为我的列相当窄，日历也很窄，所以如果我使用

扩大日历

[style]="{'width':'300px'}"

然后我的专栏也扩大了，这不是我想要的。

为了保持我的列宽和让弹出窗口以完整/正常大小显示，我将其添加到 p-table 元素中： #myTable 在 p-calendar 元素中，我添加了以下内容： [appendTo]="myTable"

Answer 5

我知道这已经过时了，但以防万一有人在将来遇到此问题并且发现上述解决方案均无效。请参阅下文。

OP 提到父 div：

<div>
  <p-calendar [(ngModel)]="date1" class="treetableDate"></p-calendar>
</div>

:host {
  ...
  > div {
    display: flex;
    > p-calendar {
      flex-grow: 1;
    }
  }
}