title: How to set/format the date of p:calendar on client side?
body: <p>First of all the current situation. I have a JSF page where a date is rendered like this</p>
  
  <pre><code>&lt;h:outputText value="#{bean[date]}" &gt;
      &lt;f:convertDateTime pattern="#{Const.CALENDAR_PATTERN}"/&gt; 
          // contains a calendar pattern, here dd.MMM yyyy
  &lt;/h:outputText&gt;
  </code></pre>
  
  <p>On another location there is a <code>p:calendar</code> input component, and I like to set the value of this calendar via a button click on the client side!</p>
  
  <p>A first hard coded attempt works fine:</p>
  
  <pre><code>onclick="document.getElementById('calendar_id_input')
      .setAttribute('value', '21.Jan 2015');"
  </code></pre>
  
  <p>But when I am using the date, that comes from the bean, then the pattern does not match, of course:</p>
  
  <pre><code>onclick="document.getElementById('calendar_id_input')
      .setAttribute('value', '#{bean[date]}');"
  </code></pre>
  
  <p>This got rendered to (and would work fine as well, if the calendar would accept this pattern):</p>
  
  <pre><code>onclick="document.getElementById('calendar_id_input')
      .setAttribute('value', 'Sat Jan 03 18:00:57 CET 2015');"
  </code></pre>
  
  <p>So I tried using the jQuery-datepicker formatter to format the the date before I set the value in the calendar like this:</p>
  
  <pre><code>onclick="document.getElementById('calendar_id_input')
      .setAttribute('value', $.datepicker
            .formatDate('#{Const.CALENDAR_PATTERN}', new Date( #{bean[date]} )  ) 
       );"
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>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;;"
  </code></pre>
  
  <p>What is wrong here and how may I fix it? Unfortunately I am not very familar with javascript and/or jQuery..</p>
  
  <p>Thanks in advance!</p>
  
  <hr>
  
  <p>According to BalusC's answer, I changed my code to:</p>
  
  <pre><code>onclick="document.getElementById('calendar_id_input')
  .setAttribute('value', $.datepicker
  .formatDate('#{Const.CALENDAR_PATTERN}', new Date(#{bean[date].time})));"
  </code></pre>
  
  <p>Now the value of the calendar is set, but no matter which pattern I try, the result is strange. E.g with the pattern <code>dd.MMM yyy</code> which I like to use, I have the strange outcome <code>03. JanuaryJan 2015</code>
  I cannot imagine that there might be compatibilty conflicts with those pattern, as primefaces is build on jQuery, isn't it?</p>
  
  <hr>
  
  <p>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.</p>