Как активировать загрузчик DatePicker через иконку

Question

Как я могу активировать загрузчик DatePicker, щелкнув по значку?

Мой HTML-код:

<input type="text" class="datepicker">  
    <span class="add-on"><i class="icon-calendar" id="cal2"></i></span>

и скрипт такой:

<script>
$(function(){
    $('.datepicker').datepicker({
        format: 'mm-dd-yyyy',
        endDate: '+0d',
        autoclose: true
    });
});
</script>

Я хочу активировать свой DatePicker, нажав на значок, но он не работает.

Как мне этого добиться?

Answer 1

<input type="text" id="my-datepicker" class="datepicker">  
<span class="add-on"><i class="icon-calendar" id="cal2"></i></span>

<script type="text/javascript">"
   $('#cal2').click(function(){
       $(document).ready(function(){
           $("#my-datepicker").datepicker().focus();
       });
   });
</script>

Answer 2

Вы можете сделать это так, но в html есть небольшие изменения.

<input type="text" class="datepicker" id="tb_date">  
<label class="add-on" for="tb_date">
  <i class="icon-calendar" id="cal2"></i>
</label>

Answer 3

Из документов, заверните свой DatePicker textbox с div лайк

<div class="input-append date" id="dp3">
    <input type="text" id="datepicker" /> 
       <span class="add-on"><i class="icon-calendar" id="cal2"></i></span>
</div>

Затем прикрепил событие datepicker с div это как

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

JSFiddle

Answer 4

Согласно документации:

.datepicker ('show') Показывать средство выбора даты.

Просто используйте событие click, чтобы показать свой указатель даты.

Answer 5

<script>
$(function(){
    $('.datepicker').datepicker({
        format: 'mm-dd-yyyy',
        endDate: '+0d',
        autoclose: true,
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true
    });
});
</script>

Answer 6

В версии 1.2.0 это сделано по умолчанию:

http://eternicode.github.io/bootstrap-datepicker/?markup=component&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&language=en&orientation=auto&keyboardNavigation=on&forceParse=on