jquery datepicker不顯示按鈕點擊時

Question

我似乎無法讓我的jQuery日期選擇器顯示，當我點擊我的按鈕。 僅供參考 - 我的按鈕是引導輸入組內 這裏是我的代碼

$("#jumbotronDate").datepicker({ 
 
    showOn: "both", 
 
    minDate: 0, 
 
    maxDate: 30 
 
});

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input-group input-group-lg" style="padding-right: 200px;"> 
 
    <input id="jumbotronSearch" type="text" style="max-width: none;" class="form-control" placeholder="Location" aria-describedby="jumbotronDate"> 
 

 

 
    <div class="input-group-btn"> 
 
    <button id="jumbotronDate" class="btn btn-default">08/28/2017</button> 
 
    <button id="jumbotronStyle" type="button" class="btn btn-default dropdown-toggle" style="border-radius: 0px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Style <span class="caret"></span></button> 
 
    <ul class="dropdown-menu dropdown-menu-right"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li role="separator" class="divider"></li> 
 
     <li><a href="#">Separated link</a></li> 
 
    </ul> 
 
    <button id="jumbotronSubmit" class="btn btn-default" type="button">Search!</button> 
 
    </div> 
 
</div>

我在這裏嘗試一些不同的東西，但似乎沒有奏效

$('#jumbotronDate').click(function (e) { 

     //$('#jumbotronDate').focus(); 
     $('#jumbotronDate').datepicker().focus(); 
     //$("#jumbotronDate", $(this).closest(".input-group")).focus(); 
     e.preventDefault(); 
    }); 

Answer 1

在這裏你去解決方案https://jsfiddle.net/dnexpmdh/

$("#jumbotronDate").datepicker({ 
 
    minDate: 0, 
 
    maxDate: 30 
 
});

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div class="input-group input-group-lg" style="padding-right: 200px;"> 
 
    <input id="jumbotronSearch" type="text" style="max-width: none;" class="form-control" placeholder="Location" aria-describedby="jumbotronDate"> 
 

 

 
    <div class="input-group-btn"> 
 
    <input type="text" id="jumbotronDate" class="btn btn-default" value="08/28/2017" /> 
 
    <button id="jumbotronStyle" type="button" class="btn btn-default dropdown-toggle" style="border-radius: 0px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Style <span class="caret"></span></button> 
 
    <ul class="dropdown-menu dropdown-menu-right"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li role="separator" class="divider"></li> 
 
     <li><a href="#">Separated link</a></li> 
 
    </ul> 
 
    <button id="jumbotronSubmit" class="btn btn-default" type="button">Search!</button> 
 
    </div> 
 
</div>

Datepicker只適用於div或input textbox。 代替button代替Datepicker，我將其更改爲input textbox。

希望這能解決您的問題。