5

Is it possible to hide the input field in the primeng calendar, and show only the icon? I don't want to change the p-calendar element to inline, but just display the icon that will pop up the calendar.

component.html

<div class="ui-g-12 ui-md-4">
  <p-calendar class="foo-cal" appendTo="body" readonlyInput="true" dateFormat="yy/mm/dd" [(ngModel)]="date" [showIcon]="true"></p-calendar>
</div>

I tried the following, but no success:

body .ui-calendar.ui-calendar-w-btn .ui-inputtext {
    display: none !important;
}

p-calendar span input {
    display: none !important;
}

However, with the devtools in the browser if I add the display: none; property to the element, it will hide leaving the icon only. Any ideas how can I make this to render the html file without the input field?

chris
  • 2,490
  • 4
  • 32
  • 56
  • Check th Style part for the casses of component ex. the ui-inputtext class, you can override the casses on the global style file of angular – CREM Sep 07 '19 at 23:27
  • thanks, can you explain a bit more? – chris Sep 07 '19 at 23:38
  • Hi @chris if this or any answer has solved your question please consider accepting it. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. – Muhammed Albarmavi Sep 11 '19 at 14:20
  • hi @malbarmawi! I just accepted your answer, thanks for the solution ;) I ended up using another lib for the calendar, but I tried implementing your solution to double check it worked in my project too. Thanks! – chris Sep 12 '19 at 15:04

2 Answers2

2

You just need to create a custom style for the p-calendar component

<div class="ui-g-12 ui-md-4">
  <h3>Icon</h3>
  <p-calendar styleClass="only-icon" [(ngModel)]="date" [showIcon]="true"></p-calendar>
</div>

style.scss

.only-icon {
 .ui-inputtext{
   display: none;
 }
 button.ui-datepicker-trigger.ui-calendar-button  {
   border-radius: 4px !important;
 }
}

demo ⚡⚡

apply this style to all componnt without any custome class

p-calendar {
 .ui-inputtext{
   display: none;
 }
 button.ui-datepicker-trigger.ui-calendar-button  {
   border-radius: 4px !important;
 }
}

the style above gone to apply to a p-calendar to all project.

Muhammed Albarmavi
  • 23,240
  • 8
  • 66
  • 91
1

I think if you set display none for input , users can't see calendar when click in there but you can use this css code for input and show your icon as image in background-image.

input{
    border: none;
    background-image: url(your-icon-address);
    color: transparent;
    text-shadow: 0 0 0 #fff;
    cursor:pointer;
    /*width:somthing; if you need*/
    /*height:somthing; if you need*/
}
input:focus{
    outline:0;
}

you can set width and height input same as icon.

vahab
  • 23
  • 6
  • This!! Thank you!! The accepted answer didn't work for me, so I did this solution but modified it a bit: :host ::ng-deep .p-inputtext { border: none; color: transparent; text-shadow: 0 0 0 #fff; cursor:pointer; width: 0 !important; heigt: 0 !important; padding: 0 !important; } – Sarah Apr 02 '21 at 12:34
  • Also replace "outline: 0" with "box-shadow: none !important;", because box-shadow is the property that causes the outline on the onFocus for all PrimeNG elements – Sarah Apr 02 '21 at 12:38