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。

希望这能解决您的问题。