How to autoclose and click icon datepicker bootstrap

Question

I have problem with code:

<div class="control-group input-append date">
  <label class="control-label" for="cid">Check In</label>
  <div class="controls">
    <input class="span8 required" name="cid" type="text" id="cid">
    <span class="add-on"><i class="icon-calendar"></i></span>
  </div>
</div>

and the javascript:

<script>
   $('#cid').datepicker();
</script>

Exactly I have done insert jquery and datepicker javascript.

Problem:

1. The date can't auto close. I want to after click date, the table date will autoclose.

2. The icon calender can't click. I want to if user click icon calender beside form input, the table calender will showing.

Thanks

Solution

Can you try :

$('.datepicker tbody').on('click', function(){  $('.datepicker').hide() });



$('.icon-calendar').on('click', function(){ $('.datepicker').toggle()   });

You have to precise the jquery selector in case where you have multi icon calendar or datepicker;

Comments

[john]

great, but if I add 2 field icon-calender, actually the icon can't click. Any mistake?