I don't know how to obtain the Date value of a <p:calendar> in PrimeFaces ponent using JavaScript

This is my ponent

<p:calendar id="calendarInicio"
            widgetVar="horaInicioSpin"
            value="#{hbean.horaInicial}" timeOnly="true" 
            pattern="HH:mm" required="true"/>

I need to obtain the hour value of the ponent because I'm gonna send that value into other <p:calendar> ponent, using JavaScript. Can anyone give me an idea? Thanks in advance...

I don't know how to obtain the Date value of a <p:calendar> in PrimeFaces ponent using JavaScript

This is my ponent

<p:calendar id="calendarInicio"
            widgetVar="horaInicioSpin"
            value="#{hbean.horaInicial}" timeOnly="true" 
            pattern="HH:mm" required="true"/>

I need to obtain the hour value of the ponent because I'm gonna send that value into other <p:calendar> ponent, using JavaScript. Can anyone give me an idea? Thanks in advance...

• javascript
• jsf
• primefaces
• calendar

• Try using PrimeFaces.widgets['horaInicioSpin'] in JavaScript. – Luiggi Mendoza Commented Apr 22, 2015 at 17:48

1 Answer 1

PrimeFaces provides a powerful client side API. Make use of it!

1. Add a widgetName to your calendar. This way it is way easier to handle to ponent on the client side

   <p:calendar widgetVar="mycalendar" ... />
   

2. write your custom JS, using the PrimeFaces client side API

   <h:form>
        <p:calendar widgetVar="mycal1" timeOnly="true" />
        <p:calendar widgetVar="mycal2" timeOnly="true" />
        <p:mandButton 
         onclick="var d = PF('mycal1').getDate(); d.setHours(d.getHours() + 1); PF('mycal2').setDate(d);" />
   </h:form>
   

Inside JS, you are able to modify the returned date according to your requirements and afterwards use the .setDate() function to set your date in the other calendar.