更改bootstrap的datepicker位置和行为

Question

我的网站上有一个bootstrap datepicker输入字段，但它表现得很奇怪，我无法弄清楚如何改变这种行为。 首先，当我点击日期字段时，会打开datepicker框，但看起来它是从我的实际日期字段之前的字段打开的。

以下是截图：

我的另一个问题是我选择约会时。当我这样做时，我实际上必须点击日历框外的某个地方才能关闭它。否则它不会。 任何有关如何解决问题的提示将不胜感激。我对此很陌生。

这是我的html（bs）：

<div id="lblNewApp" class="menu-content">

                <form class="form-horizontal">
          <div class="form-group">
            <label class="control-label col-sm-2" for="name">Full Name:</label>
            <div class="col-sm-2">
              <input type="name" class="form-control" id="nameFull" readonly="readonly">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-2" for="phone">Phone:</label>
            <div class="col-sm-2">
              <input type="phone" class="form-control" id="phoneApp" readonly="readonly">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-sm-2" for="email">Email:</label>
            <div class="col-sm-2">
              <input type="email" class="form-control" id="emailApp" readonly="readonly" >
            </div>
          </div>

           <div class="form-group">
            <label class="control-label col-sm-2" for="date" ">Date:</label>
            <div class="col-sm-2">
            <!-- <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/> -->
              <input type="text" class="form-control datepicker" name="date">
            </div>
          </div>
        </div>

和jQuery：

 var date = new Date();
     $(function() {
        $(".datepicker").datepicker({
          maxDate: '+1m',              
          minDate: date,               
          daysOfWeekDisabled: [0,6]   
});