How to open a bootstrap datepicker by clicking a button?

Question

I have a bootstrap datepicker, which can be opened by clicking on an input. I would like to change it and to open it by click on a button.How can it be performed?

Here is my code which opens datepicker on an input:

<!DOCTYPE html>
<html>
<head>
<title>Test Zone</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>

<body>
    <div class="bootstrap-iso">
     <div class="container-fluid">
      <div class="row">
       <div class="col-md-6 col-sm-6 col-xs-12">

        <!-- Form code begins -->
        <form method="post">
          <div class="form-group"> <!-- Date input -->
            <label class="control-label" for="date">Date</label>
            <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
          </div>
          <div class="form-group"> <!-- Submit button -->
            <button class="btn btn-primary " id="submit" type="submit">Submit</button>
          </div>
         </form>
         <!-- Form code ends --> 

        </div>
      </div>    
     </div>
    </div>

<script>

    $(document).ready(function(){
          var date_input=$('input[name="date"]'); //our date input has the name "date"
          var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
          var options={
            format: 'mm/dd/yyyy',
            container: container,
            todayHighlight: true,
            autoclose: true,
          };
          date_input.datepicker(options);
    })
</script>


</body>
</html>

Now, how can I force the datepicker to be opened on input but by clicking on the submit button not by clicking on input?

Thanks in advance

You want the datepicker to open onlywhen you'r clicking on the button nt when you focus the input? — Batsheva Hansav, Jun 13 '19 at 18:22
I want the datepicker to be opened on the input only when I'm clicking on the button. In the following answers, the datepicker is also opened when I focus the input and I don't want this. I want only clicking the button to open it on the input. Also as user can enter any date format manually in the input, I want to mark the entered date by user on datepicker. — Violet Sanders, Jun 14 '19 at 16:17

score 0 · Answer 1 · answered Jun 11 '19 at 17:11

0

Add following code into script tag

 $("#submit").click(function(){
    var date_input=$('input[name="date"]'); //our date input has the name "date"
    date_input.focus();
 })

answered Jun 11 '19 at 17:11

Vikas Keskar

1,158
9
17

Thanks for your reply. It works fine, but it is opened only for two seconds and then closed. How can I make it remaining open till clicking anywhere else in page? It also is opened when I click on input, But I want datepicker to be opened only by clicking button. If I remove my script code above which is written for input and only put your mentioned script code, datepicker is not shown any more by clicking the button – Violet Sanders Jun 12 '19 at 05:24
Try `e.preventDefault();` in click event listener. – Vikas Keskar Jun 12 '19 at 14:51
Set specific format to input and listen for onchange event, so that when value will be updates, so that you can check if value is in required format or not. – Vikas Keskar Jun 12 '19 at 15:33
Many thanks. It works fine. But as I want to let user enter any format of date in input, too, this code doesn't do this for me. Even though I remove the first script (`$(document).ready(function(){` ), by clicking in the input, the datepicker will be opened in the input and doesn't let user to enter any text. Is there any way to let user enter desired formats of date and open datepicker ONLY by clicking the button? Or how to mark the entered date by user (manual entering in input) on date picker? – Violet Sanders Jun 12 '19 at 17:34

Sooriya Dasanayake · Answer 2 · 2019-06-12T05:40:02.020

Try this.. Using e.preventDefault(); $("#date").datepicker().focus(); Add this

$("#submit").click(function(e){
   e.preventDefault();
   $("#date").datepicker().focus();
 })

<!DOCTYPE html>
<html>
<head>
<title>Test Zone</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
</head>
<body>
    <div class="bootstrap-iso">
     <div class="container-fluid">
      <div class="row">
       <div class="col-md-6 col-sm-6 col-xs-12">

        <!-- Form code begins -->
        <form method="post" id="form">
          <div class="form-group"> <!-- Date input -->
            <label class="control-label" for="date">Date</label>
            <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
          </div>
          <div class="form-group"> <!-- Submit button -->
            <button class="btn btn-primary " id="submit" type="submit">Submit</button>
          </div>
         </form>
         <!-- Form code ends --> 

        </div>
      </div>    
     </div>
    </div>

<script>

    $(document).ready(function(){
          var date_input=$('input[name="date"]'); //our date input has the name "date"
          var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
          var options={
            format: 'mm/dd/yyyy',
            container: container,
            todayHighlight: true,
            autoclose: true,
          };
          date_input.datepicker(options);
    })
    $("#submit").click(function(e){
     e.preventDefault();
     $("#date").datepicker().focus();
  })

</script>

</body>
</html>

Many thanks. It works fine. But as I want to let user enter any format of date in input, too, this code doesn't do this for me. Even though I remove the first script (`$(document).ready(function(){` ), by clicking in the input, the datepicker will be opened in the input and doesn't let user to enter any text. Is there any way to let user enter desired formats of date and open datepicker ONLY by clicking the button? Or how to mark the entered date by user (manual entering in input) on date picker? — Violet Sanders, Jun 12 '19 at 17:34

Madacol · Answer 3 · 2019-07-26T14:07:28.983

I'm not using bootstraps datepicker, but works with native datepickers in chrome and firefox

I'm using this tricks:

Hope they help you adapt this to bootstrap's

div {
  position: relative;
}
input {
  position: absolute;
  opacity: 0;
}
input::-webkit-calendar-picker-indicator {
  width: 100%;
  height: 100%;
  opacity: 0;
}
input:hover + button {
  background-color: silver;
}

<div>
  <input type="date">
  <button id="calendar_text">Search Date </button>
</div>

How to open a bootstrap datepicker by clicking a button?

3 Answers3