Page 1 of 1

calendar inside of editable cell

Posted: 30 Oct 2019, 18:53
by tair
using p-calendar latest primeng vesion inside on A8 app, I am trying to show p-calendar inside of one table cells, when cell clicked, so i have following html:

Code: Select all

                      <td  [pEditableColumn]="data" [pEditableColumnField]="'MailingDate'">
                        <p-cellEditor>
                          <ng-template pTemplate="input">
                              <p-calendar [(ngModel)]="data['MailingDate']" [ngModelOptions]="{standalone: true}" [showIcon]="true" dateFormat="mm/dd/yy"></p-calendar>
                          </ng-template>
                          <ng-template pTemplate="output">
                            {{data['MailingDate']}}
                          </ng-template>
                        </p-cellEditor>
                      </td>
when in edit mode of cell it does not show calendar button, when i inspect elements, it finds button to the right size of editable date text, but not visible, when i give CSS as left: -30px i can see button when i click on it calendar do not popup. Do i need to wrap p-calendar to specific set of divs?

Re: calendar inside of editable cell

Posted: 01 Nov 2019, 10:39
by yigitfindikli
tair wrote:
30 Oct 2019, 18:53
using p-calendar latest primeng vesion inside on A8 app, I am trying to show p-calendar inside of one table cells, when cell clicked, so i have following html:

Code: Select all

                      <td  [pEditableColumn]="data" [pEditableColumnField]="'MailingDate'">
                        <p-cellEditor>
                          <ng-template pTemplate="input">
                              <p-calendar [(ngModel)]="data['MailingDate']" [ngModelOptions]="{standalone: true}" [showIcon]="true" dateFormat="mm/dd/yy"></p-calendar>
                          </ng-template>
                          <ng-template pTemplate="output">
                            {{data['MailingDate']}}
                          </ng-template>
                        </p-cellEditor>
                      </td>
when in edit mode of cell it does not show calendar button, when i inspect elements, it finds button to the right size of editable date text, but not visible, when i give CSS as left: -30px i can see button when i click on it calendar do not popup. Do i need to wrap p-calendar to specific set of divs?
Hi,
Can you provide stackblitz sample with https://stackblitz.com/github/primeface ... e-template .
Best Regards.