<div class="container">
  <p>This is a datepicker example using jquery, jquery ui, and jquery css</p>
<form>
Date:
<input id="datepicker">
</form>
</div>

/* jQuery CSS //code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css */
/* The below CSS is just for display purposes */

.container {
  width: 600px;
  padding: 20px;
  margin: auto;
  background: #ffd393;
}
.hasDatepicker{
  
}

<!-- Using latest jQuery, and jQuery UI -->
 $(function(){
   $( "#datepicker" ).datepicker();
});
 
var displayStyle;
document.querySelector('form').addEventListener('pointerdown', function(event){
     if(event.target.id='datepicker'){
       displayStyle = window.getComputedStyle(document.querySelector('#ui-datepicker-div'), null).getPropertyValue("display");
       document.querySelector('#ui-datepicker-div').style.display = displayStyle == 'none' ? 'block' : 'none'
     }  
},true);