stg stg - 1 year ago 84
Javascript Question

How to set/format the date of p:calendar on client side?

First of all the current situation. I have a JSF page where a date is rendered like this

<h:outputText value="#{bean[date]}" >
<f:convertDateTime pattern="#{Const.CALENDAR_PATTERN}"/>
// contains a calendar pattern, here dd.MMM yyyy
</h:outputText>


On another location there is a
p:calendar
input component, and I like to set the value of this calendar via a button click on the client side!

A first hard coded attempt works fine:

onclick="document.getElementById('calendar_id_input')
.setAttribute('value', '21.Jan 2015');"


But when I am using the date, that comes from the bean, then the pattern does not match, of course:

onclick="document.getElementById('calendar_id_input')
.setAttribute('value', '#{bean[date]}');"


This got rendered to (and would work fine as well, if the calendar would accept this pattern):

onclick="document.getElementById('calendar_id_input')
.setAttribute('value', 'Sat Jan 03 18:00:57 CET 2015');"


So I tried using the jQuery-datepicker formatter to format the the date before I set the value in the calendar like this:

onclick="document.getElementById('calendar_id_input')
.setAttribute('value', $.datepicker
.formatDate('#{Const.CALENDAR_PATTERN}', new Date( #{bean[date]} ) )
);"


The full rendered outcome in the last attempt looks like this, but does not work, ie the value of the calendar is not set at all:

onclick="document.getElementById('calendar_id_input')
.setAttribute('value', $.datepicker
.formatDate('dd.MMM yyyy', new Date( Sat Jan 03 18:00:57 CET 2015 ) )
);
return false;;"


What is wrong here and how may I fix it? Unfortunately I am not very familar with javascript and/or jQuery..

Thanks in advance!




According to BalusC's answer, I changed my code to:

onclick="document.getElementById('calendar_id_input')
.setAttribute('value', $.datepicker
.formatDate('#{Const.CALENDAR_PATTERN}', new Date(#{bean[date].time})));"


Now the value of the calendar is set, but no matter which pattern I try, the result is strange. E.g with the pattern
dd.MMM yyy
which I like to use, I have the strange outcome
03. JanuaryJan 2015

I cannot imagine that there might be compatibilty conflicts with those pattern, as primefaces is build on jQuery, isn't it?




Additional problem:
Once the value of the calendar is set (e.g. by manually selecting a date from the datepicker), the value-attribute of the input component is updated correctly, but the calendar still shows the old value.

stg stg
Answer Source

To close this question finally I'd like to share my solution with you. Maybe it is helpful for someone else in the future:

The PrimeFaces component p:calendar provides a setDate function in the client side API. So the final solution that I am using now reads like this

<p:calendar widgetVar="calendar_widget_name" />

<p:commandButton type="button"
    onclick="PF('calendar_widget_name').setDate(new Date(#{bean[date].time}));"
/>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download