0

I've used time-picker from PrimeNG, I need the time only on left and the time to be displayed on the right side of text. I'm unable to add css and change its view can any one please look into this ?

<div class="ui-g-12 ui-md-4"> <h3>Select a Time</h3> <p-calendar [(ngModel)]="date8" [timeOnly]="true" class="timer"></p-calendar> </div>

enter image description here

Antikhippe
  • 6,316
  • 2
  • 28
  • 43
Bhascker
  • 1
  • 1
  • 2
  • I don't really understand *"I need the time only on left and the time to be displayed on the right side of text."* Do you want the input to be at the right on the same line of label "Select a Time" ? – Antikhippe Jan 05 '18 at 09:47

1 Answers1

0

Try this snippet. 

.custom-time-picker .ui-inputtext {
    width: 80px;
}
.custom-time-picker .ui-datepicker {
    top: 0;
    left: 80px;
}

Don't forget to set ViewEncapsulation.None in the container component.

Ashraful Islam
  • 1,228
  • 10
  • 13