Eternicode bootstrap datepicker: how do you pass options when you are using show event?

Question

I am using https://stackoverflow.com/a/20719037/3255963 to get eternicode's datepicker to pop up when a calendar icon is selected as opposed to the default behavior which pops up on field focus.

    $('.input-group-addon').click(function () {
        $('.input-group.date').datepicker('show');
    });

How would I add options like autoclose to this code?

<form class="myform" method="GET" action="servlet" class="navbar-form navbar-left">
   <div class="col-md-3">
      <div class="input-group date">
      <input id="datepicker" name="pickedDate" type="text" class="form-control" placeholder="mm/dd/yyyy"/><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      </div>
   </div>
   <button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Calculate Dates!</button> <button type="reset" class="btn btn-warning"><i class="glyphicon glyphicon-remove"></i> Reset</button>
   <input id="month" name="monthHTML" value="" type="hidden"/>
   <input id="day" name="dayHTML" value="" type="hidden"/>
   <input id="year" name="yearHTML" value="" type="hidden"/>
</form>

Answer 1

You need to create the datepicker in advance.

So if you have this HTML:

<div class="input-group">
   <input type="text" class="form-control" id="datetext"/>
   <span class="input-group-btn">
     <button class="btn btn-default" type="button" id="datebtn">
        <span class="glyphicon glyphicon-calendar"></span>
     </button>
   </span>
</div>

Then the following JavaScript will work, with the options passed into the datepicker when it is initialized:

$('#datetext').datepicker({    autoclose: true,
                               format: "dd MM yyyy"
                          })
              .off('focus');
$('#datebtn').click(function () {
    $('#datetext').datepicker('show');
});

JS Fiddle here.