calendar inside of editable cell

[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?

[yigitfindikli]

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.

[jeff1984b]

Here is a fix I could do, the problem occurs when we click on the selects to choose the year or month.

I am using the version 9.

<p-calendar
(onFocus)="onFocus($event)" ></p-calendar>

onFocus(evt) {
setTimeout(function(){
const selectDatePickerMonth:any = document.getElementsByClassName("ui-datepicker-month");
if(selectDatePickerMonth.length==1) {
const elem = selectDatePickerMonth[0];
elem.addEventListener('click',
function(evt){
evt.stopImmediatePropagation();
}, false);
}

const selectDatePickerYear:any = document.getElementsByClassName("ui-datepicker-year");
if(selectDatePickerYear.length==1) {
const elem = selectDatePickerYear[0];
elem.addEventListener('click',
function(evt){
evt.stopImmediatePropagation();
}, false);
}
}, 250);
}

PS: The function onShow is not implemented, then I used onFocus with a little delay of 250ms to let the panel be visible.

[adelebrown68]

Make it easy to insert dates using a pop-up calendar date selector in a cell in Google Sheets. There are just a few quick steps. viewtopic.php?f=35&t=79751
papa's games