calendar inside of editable cell

UI Components for Angular
Post Reply
tair
Posts: 1
Joined: 28 Oct 2019, 20:19

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?

yigitfindikli
Posts: 398
Joined: 08 Aug 2018, 14:09

01 Nov 2019, 10:39

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.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests