PrimeNG p-calendar not able to navigate to next months

896 Views Asked by At

I have a p-calendar in which the datetime will be displayed in a text box as current date+1 by default.

What I am trying to achieve is that, I need to update the textbox with updated datetime, ie the text box is only displayed based on a dropdown option.

So when the dropdown option changes, the text box is hidden and again enable based on a drop down value. I have tried using the set interval option, where it clearly provides me my updated date time, but what now I face is that once I set the interval, I am not able to navigate next months.

Also I need to disable past date prior to today [done].

Typescript code :

   minDateValue = new Date()
   datevalue = new Date();
    

   setInterval(() => {
  this.datevalue = new Date();
  this.datevalue.setDate(this.expiryDate.getDate() + 1);
}, 1);

HTML code :

 <p-calendar [(ngModel)]="datevalue" showTime="true" hourFormat="24" [minDate]="minDateValue" [disabledDates]="invalidDates"
                                [defaultDate]="datevalue" [showIcon]="true" [ngModelOptions]="{standalone: true}">
                            </p-calendar>

As you can see in the image the arrow button to the next month is disabled and i need it to be enabled.

Not sure, where it has gone wrong, but if I remove the set interval code, I am able to navigate to next months.

0

There are 0 best solutions below