[Solved] Is it possible to focus on the hidden input field?

Question

Well, I think I understood your query what exactly you want to achieve.

you want to show the datepicker without visible container. It seems impossible because whenever you load datepicker it need some CSS property like left, positioning and all. and if datepicker container is hidden it will throw you exception.

Below is another way by which you can achieve this. Create an empty html element and add date picker to it.

Here is the working code; change your html structure accordingly.

JSFiddle: http://jsfiddle.net/vikash2402/8w8v9/2030/

$('#showDateContainer').click(function(){
$("#showDateItem").show && $("#showDateItem").show();
$('#showDateItem').datepicker({
        dateFormat: 'dd-mm-yy',
         onSelect: function(dateText) {
   		$('#dateContainer').text(dateText);
        console.log(dateText);
        $("#showDateItem").hide();
        }
        
    });
});

<link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>



<div id="showDateContainer" type="button" >Click here to Shown Date</div>
<div id="showDateItem"> </div>
<br />
<br />
<div id="dateContainer" type="button" > currentData </div>

Hoping this will help you 🙂

Accepted Answer