Changing the icon of the calendar component

UI Components for Angular
Post Reply
kc7bfi
Posts: 3
Joined: 22 Feb 2018, 22:53

22 Feb 2018, 22:57

I am trying to change the icon of the calendar component to one of the other awsome-font icons, specifically the clock icon. My code is:

Code: Select all

<p-calendar [timeOnly]="true" [showSeconds] ="true" [showIcon]="true" [icon]="fa-clock" placeholder="To time" formControlName="toTime"
I've tried clock, fa-clock, fa-clock-o and none of the display correctly. I am new to PrimeNG. Am I doing something wrong?
Thanks, David

shannila
Posts: 3
Joined: 22 Jan 2018, 13:08

23 Feb 2018, 11:43

which browser you are working on ? in IE sometimes it doesnt work. If you want to show the deaulf fa-calendar then remove the [icon] property from the html.

kc7bfi
Posts: 3
Joined: 22 Feb 2018, 22:53

23 Feb 2018, 16:18

I was trying it in Chrome. I wanted the clock icon because I am using p-calendar to enter time only. Could it be something I'm not including properly into my application? Thanks, David

uiketekaes
Posts: 1
Joined: 23 Feb 2018, 22:13

23 Feb 2018, 22:53

kc7bfi wrote:
23 Feb 2018, 16:18
I was trying it in Chrome. I wanted the clock icon because I am using p-calendar to enter time only. Could it be something I'm not including properly into my application? Thanks, David
Hi man, try this:

<p-calendar [timeOnly]="true" [showSeconds] ="true" [showIcon]="true" icon="fa-clock" placeholder="To time" formControlName="toTime"

remove [ ]

:)

kc7bfi
Posts: 3
Joined: 22 Feb 2018, 22:53

26 Feb 2018, 16:13

It turns out the correct syntax is: icon="fa-clock-o"
Thanks for your help. David

palworksng
Posts: 4
Joined: 30 Mar 2018, 17:28

30 Mar 2018, 19:37

How can we change the calendar icon background color ?

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 9 guests