单击输入时如何强制引导日历在<i>标签下聚焦和打开？

Question

我有一个Bootstrap日历。单击日历图标时会打开，但单击输入时它不会打开。我想在点击输入时在日历图标下打开日历，而不是在输入元素下面。

<div class="input-append date" id="dp3" data-date="11/03/2017" data-date-format="dd/mm/yyyy">
<input class="span2" id="dp2" size="16" type="text" value="11/03/2017">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<script>
    $(document).ready(function() {
            $('#dp3').datepicker({
                    format: 'dd/mm/yyyy'
                })
                    .on('changeDate', function(){
                        $('#dp3').datepicker('hide');
                    });

        $('#dp2').click(function(event){
        event.preventDefault();
        $('#dp3').datepicker({
                    format: 'dd/mm/yyyy'
                })
                    .on('changeDate', function(){

                        $('#dp3').datepicker('hide');
                    });
    });
        </script>

Answer 1

我认为这里没有回答简单的问题。而不是点击向下投票按钮，提供一个工作示例链接将是有用的。无论如何花了半个多小时但是让它起作用很简单。没想到要使用$('#dp3').datepicker('show');

$(document).ready(function() {

        $("#dp3").datepicker();

        $('#dp2').click(function () {
            $('#dp3').datepicker('show');
        });
  });