p：日历不起作用

Question

I have a very strange problem regarding <p:calendar> component. I have a calendar in a <p:panelGrid> (see below), but when I open my page, calendar is not opened when clicked on a "input box" like it should.

<p:panelGrid>                           
    <p:calendar value="#{backingBean.date}" />
</p:panelGrid>

Of course, date attribute is in my backing bean:

private Date date;

public void setDate(Date date) {
    this.date = date;
}

public Date getDate() {
    return date;
}

I just don't know what to do to make it work. One more thing: there are problems with a ~` too. Just cannot click on it to select value.

PS: Using PF 5.1

Answer 1

Make sure there is a <h:form> in your page. Generally we specify

<p:calendar id="c1" pattern="yyyy/MM/dd HH:mm:ss" timeZone="IST" 
      value="#{backingBean.date}" showOn="button"/>

Checkout Primeface-caledar showcase for more calendar examples

Answer 2

could you try below code

<p:panelGrid columns="1">                          
            <p:calendar value="#{backingBean.date}" />
        </p:panelGrid>

or

 <p:panelGrid >                          
    <p:row>
        <p:column>
          <p:calendar value="#{backingBean.date}" />
        </p:column>
  </p:row>
</p:panelGrid>

Answer 3

Found the cause of my problem. With my JS validation function, i tried to validate a component with id, that didn't exist. That's why my other components were unresponsive.

Should have thought about it before...

Answer 4

import { BrowserAnimationsModule } from '@angular\/platform-browser\/animations';