title: Call Jquery datepicker in JSF page
body: <p>I want to implement Jquery datepicker into JSF page like this <a href="http://jqueryui.com/demos/datepicker/default.html" rel="nofollow noreferrer">example</a>.
  So far I managed to call the calendar into JSF input field using this code:</p>
  
  <pre><code>//For calendar
  function calendar(){                                
      // Datepicker
      $('#datepicker').datepicker({
          inline: true,
          showWeek: true,
          firstDay: 1
      });
  }
  </code></pre>
  
  <p>I use this input field to call the code:</p>
  
  <pre><code>&lt;h:panelGroup&gt;
          &lt;div id="datepicker"&gt;&lt;/div&gt;
          &lt;h:inputText  onfocus="calendar()" value="#{DatabaseController.formMap['userid']}" &gt;                                       
      &lt;/h:inputText&gt;
  &lt;/h:panelGroup&gt;
  </code></pre>
  
  <p>When I click on the input field the calendar is displayed.</p>
  
  <p><img src="https://i.stack.imgur.com/KbOXM.png" alt="enter image description here"></p>
  
  <p>I want to implement the example into the JQuery web site but in my case when I click outside the input field the calendar does not hide as should be. How I can fix this?</p>
  
  <p>Best Wishes
  Peter</p>