title: Jquery datepicker not showing when button clicked
body: <p>I can't seem to get my jquery datepicker to show up when I click on my button.
  FYI - my button is inside a bootstrap input group
  Here is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#jumbotronDate").datepicker({
    showOn: "both",
    minDate: 0,
    maxDate: 30
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="input-group input-group-lg" style="padding-right: 200px;"&gt;
    &lt;input id="jumbotronSearch" type="text" style="max-width: none;" class="form-control" placeholder="Location" aria-describedby="jumbotronDate"&gt;
  
  
    &lt;div class="input-group-btn"&gt;
      &lt;button id="jumbotronDate" class="btn btn-default"&gt;08/28/2017&lt;/button&gt;
      &lt;button id="jumbotronStyle" type="button" class="btn btn-default dropdown-toggle" style="border-radius: 0px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Style &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;ul class="dropdown-menu dropdown-menu-right"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
        &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;button id="jumbotronSubmit" class="btn btn-default" type="button"&gt;Search!&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm trying a couple different things here but nothing seems to be working</p>
  
  <pre><code>$('#jumbotronDate').click(function (e) {
  
          //$('#jumbotronDate').focus();
          $('#jumbotronDate').datepicker().focus();
          //$("#jumbotronDate", $(this).closest(".input-group")).focus();
          e.preventDefault();
      });
  </code></pre>