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

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

• javascript
• jquery
• twitter-bootstrap
• twitter-bootstrap-2

• The thing is, datepicker by default should close upon clicking a date, is there not any JavaScript errors in the console? – MackieeE Commented Oct 29, 2013 at 12:51

1 Answer 1

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;