Bootstrap Datepicker issue

Question

1. Как перенести значок календаря рядом с полем даты?
2. Почему календарь выгружается при загрузке страницы? Он отлично работает на моем локальном сервере, но не уверен, в чем проблема JSFiddle.

3. Есть ли способ установить размер поля даты как 10, чтобы не было дополнительного места в поле ввода?

   <div class ="form-group"> 
   <label class="col-sm-2 control-label" >Received Date</label>  
       <div class="col-sm-2 input-append date" id="ARDT" data-date-format="mm-dd-yyyy"> 
   <input class="text-input form-control" type="text" name="ARDT" id="ARDT" /> 
   <span class="add-on"><i class="glyphicon glyphicon-calendar"></i></span> 
   </div> 
   </div> 
   

   DEMO

Answer 1

<div class="col-sm-2 input-group date" data-date-format="mm-dd-yyyy"> 
    <input class="text-input form-control" type="text" name="ARDT" 
     id="ARDT" maxlength="10" /> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> 
</div> 

• Как я могу переместить значок календаря рядом на поле даты?

Чтобы переместить значок календаря рядом с полем даты, вы можете изменить класс DIV, что input и span находятся в от input-append до input-group и изменить span класс от add-on до input-group-addon, как показано в код выше. Существует много разных способов, которыми это можно было бы сделать, хотя это, казалось, было самым быстрым/простым, учитывая, сколько классов у каждого элемента уже есть.

• Почему календарь извлекается при загрузке страницы?

Вы в настоящее время есть div и input с тем же id, и я считаю, что это вопрос. Чтобы устранить проблему, где DatePicker показывает при загрузке страницы, удалите id="ARDT" из div, что datepicker находится.

• Есть ли способ, я могу установить размер поля даты как 10, так что не будет лишнего места в поле ввода?

Да, это может быть достигнуто, как легко, как добавить атрибут maxlength к input.

Вот эти изменения: jsFiddle.