Is it possible to focus on the hidden input field?

问题

How to trigger the hidden input field when we click the parent element.When i use the hidden field is not worked. Here is my html code:

<table>
<th colspan="2">Date</th>
<td id="dateContainer" > currentData </td>
<td><input id="thedate" type="hidden" /></td>
<table>

jquery code:

$(function(){
 $(this).click(function() {
 $(this).children().children().find('.datepicker-input').focus();
 });
});

回答1:

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 :)

来源：https://stackoverflow.com/questions/39874737/is-it-possible-to-focus-on-the-hidden-input-field