PrimeNG p-calendar时间选择器边框显示异常如何修复？

修复方案 #

• 移除第二个p-calendar标签上额外添加的border自定义类，避免和PrimeNG原生输入框边框样式冲突，保持两个时间选择器样式统一。
• 修正p-calendar宽度适配逻辑，给组件内部的输入框添加宽高适配样式，避免内容溢出导致边框截断，可在现有SCSS中添加以下规则：

:host ::ng-deep .overtime-log-form-working-hours .p-calendar .p-inputtext {
  width: 100%;
  box-sizing: border-box;
}

• 确认项目已完整引入PrimeNG基础样式和主题样式，检查angular.json的styles配置中是否包含以下资源：

"styles": [
  "node_modules/primeng/resources/themes/你的主题名/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "node_modules/primeicons/primeicons.css"
]

如果不想使用::ng-deep污染全局样式，也可以通过p-calendar的inputStyleClass属性绑定自定义类实现样式修改：

<p-calendar inputStyleClass="time-picker-input" formControlName="start_time" id="start_time" name="start_time" [(ngModel)]="model.start_time"
  (onBlur)="_formHelper.validateControl('start_time')" [timeOnly]="true" placeholder="00:00">
</p-calendar>

对应样式：

.time-picker-input {
  width: 100% !important;
  box-sizing: border-box !important;
}

内容的提问来源于stack exchange，提问作者Damith F'do