PrimeNG Time-picker样式调整求助：时间文本右侧显示设置

Hey there! I totally get how frustrating it can be when PrimeNG's component styling feels locked down—their encapsulation can make custom tweaks tricky. Let's get that time text over to the right side of your control. Here are a few reliable approaches based on common PrimeNG versions:

1. Use ::ng-deep to Penetrate Component Encapsulation (Angular) #

Since your p-calendar has the custom class timer, we can target it specifically without messing up other components. This works if you're using Angular (which you likely are with PrimeNG):

For PrimeNG 9 or older (ui-* class prefixes): #

Add this to your component's CSS/SCSS file:

::ng-deep .timer .ui-calendar-time-only {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 0.5rem; /* Adjust spacing between button and time text */
}

::ng-deep .timer .ui-calendar-time-only .ui-inputtext {
  order: 2;
}

::ng-deep .timer .ui-calendar-time-only .ui-calendar-button {
  order: 1;
}

For PrimeNG 10+ (p-* class prefixes): #

PrimeNG switched class prefixes in version 10, so update the selectors to match:

::ng-deep .timer .p-calendar-time-only {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 0.5rem;
}

::ng-deep .timer .p-calendar-time-only .p-inputtext {
  order: 2;
}

::ng-deep .timer .p-calendar-time-only .p-calendar-button {
  order: 1;
}

2. Global Styles (If ::ng-deep Isn't Allowed) #

If your project restricts using ::ng-deep, move the styles to your global styles.css/scss file. This avoids component encapsulation issues entirely:

For PrimeNG 9 or older: #

.timer .ui-calendar-time-only {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 0.5rem;
}

.timer .ui-calendar-time-only .ui-inputtext {
  order: 2;
}

.timer .ui-calendar-time-only .ui-calendar-button {
  order: 1;
}

For PrimeNG 10+: #

.timer .p-calendar-time-only {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 0.5rem;
}

.timer .p-calendar-time-only .p-inputtext {
  order: 2;
}

.timer .p-calendar-time-only .p-calendar-button {
  order: 1;
}

Quick Troubleshooting Tip #

If the styles still don't apply, right-click the time picker in your browser and inspect the DOM. Check the class names on the container, button, and input field—PrimeNG might have minor class name changes between versions, so adjusting the selectors to match what you see will fix it.

内容的提问来源于stack exchange，提问作者Bhascker