Implementing JQuery Datepicker
<p>I want to implement JQuery Datepicker. I added to my JSF code the JavaScript. This is the HTML output:</p>

<pre><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;&lt;head&gt;
            &lt;title&gt;DX-57 History Center&lt;/title&gt;
            &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
            &lt;link rel="shortcut icon" type="image/x-icon" href="resources/css/themes/nvidia.com/images/favicon.ico" /&gt;
            &lt;link href="resources/css/helper.css" media="screen" rel="stylesheet" type="text/css" /&gt;
            &lt;link href="resources/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" /&gt;
            &lt;link href="resources/css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" /&gt;

            &lt;script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
            &lt;script type="text/javascript" src="resources/js/jquery-ui-1.8.18.custom.min.js"&gt;&lt;/script&gt;
            &lt;link href="resources/css/jquery-ui-1.8.18.custom.css" media="screen" rel="stylesheet" type="text/css" /&gt;
            &lt;script type="text/javascript" src="resources/js/tabs.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
            $(function(){                                
                // Datepicker
                $('#datepicker').datepicker({
                    inline: true,
                    showWeek: true,
                    firstDay: 1
                });
            });            
        &lt;/script&gt;&lt;script type="text/javascript" src="/test/javax.faces.resource/jsf.js.jsf?ln=javax.faces&amp;amp;stage=Development"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;
        &lt;!-- demo inset for with validator --&gt;
        &lt;h1&gt;&lt;img src="resources/css/images/icon.png" alt="NVIDIA.com" /&gt; History Center&lt;/h1&gt;
        &lt;!-- layer for black background of the buttons --&gt;
        &lt;div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative;  background-color:black"&gt;
            &lt;!-- Include page Navigation --&gt;
            &lt;ul class="dropdown dropdown-horizontal" style="margin: 0 auto"&gt;
                &lt;li&gt;&lt;a href="/SR_57-1.0-SNAPSHOT/UserNav.jsf" class="dir"&gt;Home&lt;/a&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href="Dashboard.jsf"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;       
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="Sessions.jsf" class="dir"&gt;Sessions&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="Application.jsf" class="dir"&gt;Application&lt;/a&gt;
                    &lt;ul&gt;                
                        &lt;li&gt;&lt;a href="Glassfish.jsf"&gt;Glassfish&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="Linux.jsf" class="dir"&gt;Linux&lt;/a&gt;                   
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="Database.jsf" class="dir"&gt;Database&lt;/a&gt; 
                    &lt;ul&gt;                
                        &lt;li&gt;&lt;a href="History.jsf"&gt;History&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;                   
            &lt;/ul&gt;          

        &lt;/div&gt;  

        &lt;div id="logodiv" style="position:relative; top:35px; left:0px;"&gt;&lt;img src="resources/images/logo_databasez.png" alt="Demo Insert Form" style="position:relative; top:-20px; left:9px;" /&gt;
        &lt;/div&gt;
        &lt;div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute;  background-color:transparent; top:105px"&gt;

            &lt;div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute;  background-color:transparent; top:80px"&gt;

                &lt;div id="settingsHashMap" style="width:350px; height:400px; position:absolute;  background-color:r; top:20px; left:1px"&gt;
&lt;form id="j_idt13" name="j_idt13" method="post" action="/test/Database.jsf" enctype="application/x-www-form-urlencoded"&gt;
&lt;input type="hidden" name="j_idt13" value="j_idt13" /&gt;

                        &lt;div id="settingsdiv" style="width:750px; height:400px; position:absolute;  background-color:r; top:20px; left:1px"&gt;&lt;table&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Session ID&lt;/td&gt;
&lt;td&gt;&lt;input id="j_idt13:sessionid" type="text" name="j_idt13:sessionid" onblur="mojarra.ab(this,event,'blur',0,'j_idt13:sessionidMessage')" /&gt;&lt;span id="j_idt13:sessionidMessage"&gt;&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Date&lt;/td&gt;
&lt;td&gt;&lt;input id="j_idt13:datepicker" type="text" name="j_idt13:datepicker" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Login Time&lt;/td&gt;
&lt;td&gt;&lt;input id="j_idt13:logintime" type="text" name="j_idt13:logintime" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Last Refresh Time&lt;/td&gt;
&lt;td&gt;&lt;input id="j_idt13:lastrefreshtime" type="text" name="j_idt13:lastrefreshtime" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;User IP&lt;/td&gt;
&lt;td&gt;&lt;input id="j_idt13:userip" type="text" name="j_idt13:userip" /&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;


                        &lt;/div&gt;   

                        &lt;div id="settingstwodiv" style="width:150px; height:60px; position:absolute;  background-color:transparent; top:380px; left:800px"&gt;&lt;input type="submit" name="j_idt13:j_idt32" value="Create User" /&gt;

                        &lt;/div&gt;&lt;input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="7591771537138283258:6254434046150824528" autocomplete="off" /&gt;
&lt;/form&gt; 

                &lt;/div&gt;   

            &lt;/div&gt;  
        &lt;/div&gt;&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>But when I click on the input filed nothing happens. Is there something missing? Into the example that I found the calendar was using <code>&lt;div id="datepicker"&gt;&lt;/div&gt;</code> to be displayed. I use input field in my example.</p>

<p>Best Wishes</p>

<p><strong>EDIT</strong></p>

<p>I added <code>div</code> to visualize only the calendar. </p>

<p>I added the <code>div</code> here:</p>

<pre><code>&lt;h:panelGrid columns="2"&gt;
                                &lt;h:panelGroup&gt;Session ID&lt;/h:panelGroup&gt;
                                &lt;h:panelGroup&gt;
                                    &lt;h:inputText id="sessionid" value="#{DatabaseController.formMap['sessionid']}" 
                                                 validator="#{ValidatorController.validatebean}"&gt;                                        
                                        &lt;f:ajax event="blur" render="sessionidMessage" /&gt;                                          
                                    &lt;/h:inputText&gt;
                                    &lt;h:message id="sessionidMessage" for="sessionid" /&gt;
                                &lt;/h:panelGroup&gt;

                                &lt;h:panelGroup&gt;Date&lt;/h:panelGroup&gt;
                                &lt;h:panelGroup&gt;
                                     &lt;div id="datepicker"&gt;&lt;/div&gt;
                                    &lt;h:inputText id="datepicker" value="#{DatabaseController.formMap['userid']}" &gt;                                       
                                    &lt;/h:inputText&gt;
                                &lt;/h:panelGroup&gt;

                                &lt;h:panelGroup&gt;Login Time&lt;/h:panelGroup&gt;
                                &lt;h:panelGroup&gt;
                                    &lt;h:inputText id="logintime" value="#{DatabaseController.formMap['logintime']}" &gt;
                                        &lt;f:validateLength minimum="0" maximum="35"/&gt;
                                    &lt;/h:inputText&gt;
                                &lt;/h:panelGroup&gt;

                                &lt;h:panelGroup&gt;Last Refresh Time&lt;/h:panelGroup&gt;
                                &lt;h:panelGroup&gt;
                                    &lt;h:inputText id="lastrefreshtime" value="#{DatabaseController.formMap['lastrefreshtime']}" &gt;
                                        &lt;f:validateLength minimum="0" maximum="35"/&gt;
                                    &lt;/h:inputText&gt;
                                &lt;/h:panelGroup&gt;

                                &lt;h:panelGroup&gt;User IP&lt;/h:panelGroup&gt;
                                &lt;h:panelGroup&gt;
                                    &lt;h:inputText id="userip" value="#{DatabaseController.formMap['userip']}" &gt;
                                        &lt;f:validateLength minimum="0" maximum="15"/&gt;
                                    &lt;/h:inputText&gt;
                                &lt;/h:panelGroup&gt;

                            &lt;/h:panelGrid&gt; 
</code></pre>

<p><img src="http://i.stack.imgur.com/T39H4.png" alt="enter image description here"> </p>

<p>I would like to open the calendar like this example <a href="http://jqueryui.com/demos/datepicker/" rel="nofollow">here</a> - when I click on the input field.</p>

<p>It seems that there is other way to call the calendar in JSF.</p>

<p>EDIT 2</p>

<p>Is this JavaScript correct?</p>

<pre><code>function calendar(){                                
    // Datepicker
    datepicker({
        inline: true,
        showWeek: true,
        firstDay: 1
    });
}
</code></pre>

<p>I will call it with this code:</p>

<pre><code>&lt;h:inputText onclick="calendar" value="#{DatabaseController.formMap['userid']}" &gt; 
</code></pre>
