单击按钮时，Jquery datepicker 不显示

Question

当我单击我的按钮时，我似乎无法显示我的 jquery datepicker。 仅供参考 - 我的按钮在引导输入组内 这是我的代码

$("#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。

希望这能解决您的问题。