CODEWITHSUNDEEP
htmltwitter-bootstrapjquery-uidatepicker
chuckd
chuckd

Reputation: 14540

Jquery datepicker not showing when button clicked

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

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

I'm trying a couple different things here but nothing seems to be working

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

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

Upvotes: 1

Views: 1407

Answers (1)

Shiladitya
Shiladitya

Reputation: 12181

Here you go with a solution 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 only works with div or input textbox. Instead of using button for Datepicker, I changed it to input textbox.

Hope this will solve your issue.

Upvotes: 1

Related Questions