CODEWITHSUNDEEP
javascriptjsfprimefacescalendar
Marisol
Marisol

Reputation: 55

How to obtain the Date value from a p:calendar component in JavaScript?

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

This is my component 

<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 component because I'm gonna send that value into other <p:calendar> component, using JavaScript. Can anyone give me an idea? Thanks in advance...

Upvotes: 2

Views: 3647

Answers (1)

stg
stg

Reputation: 2797

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 component 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:commandButton 
      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.

Upvotes: 7

Related Questions