Bind jquery UI date-picker on focus of input element
<p>Hi i have a situation like i need to bind the jquery UI datepicker({}) function when the input element is focused.i am not able to achieve it with the below code ,so guys plz help how can i bind the datepicker function when the input element is focused</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
 &lt;title&gt; Jquery UI Date Picker &lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
   
    &lt;input type="text" id="date" /&gt;

 &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
       //$('#date').datepicker({});
       $('#date').on('foucs',function(){
          $(this).datepicker({});
       });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>