Есть календарь, который открывается по нажатию на ссылку Выбрать дату и закрывается соответственно на нее тоже. Как сделать так, чтобы календарь закрывался при клике на любом пустом поле, т.е. при пропадании фокуса на ссылке или esc?
пример в фидле
$(function() {
$(".nenezid").click(function() {
$("#datapicker").toggle();
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div>
<a href="#datapicker" data-toggle="collapse" class="nenezid">
<span>Выбрать дату</span>
<i class="date-icon"></i>
</a>
<div id="datapicker" class="collapse datapicker-style" style="display: none;">
<div class="datepicker datepicker-inline">
<div class="datepicker-days" style="display: block;">
<table class="table-condensed">
<thead>
<tr>
<th colspan="7" class="datepicker-title" style="display: none;"></th>
</tr>
<tr>
<th class="prev" style="visibility: visible;">«</th>
<th colspan="5" class="datepicker-switch">Январь 2018</th>
<th class="next" style="visibility: visible;">»</th>
</tr>
<tr>
<th class="dow">Пн</th>
<th class="dow">Вт</th>
<th class="dow">Ср</th>
<th class="dow">Чт</th>
<th class="dow">Пт</th>
<th class="dow">Сб</th>
<th class="dow">Вс</th>
</tr>
</thead>
<tbody>
<tr>
<td class="old day">25</td>
<td class="old day">26</td>
<td class="old day">27</td>
<td class="old day">28</td>
<td class="old day">29</td>
<td class="old day">30</td>
<td class="old day">31</td>
</tr>
<tr>
<td class="day">1</td>
<td class="day">2</td>
<td class="day">3</td>
<td class="day">4</td>
<td class="day">5</td>
<td class="day">6</td>
<td class="day">7</td>
</tr>
<tr>
<td class="day">8</td>
<td class="day">9</td>
<td class="day">10</td>
<td class="day">11</td>
<td class="day">12</td>
<td class="day">13</td>
<td class="day">14</td>
</tr>
<tr>
<td class="day">15</td>
<td class="day">16</td>
<td class="day">17</td>
<td class="today day">18</td>
<td class="day">19</td>
<td class="day">20</td>
<td class="day">21</td>
</tr>
<tr>
<td class="day">22</td>
<td class="day">23</td>
<td class="day">24</td>
<td class="day">25</td>
<td class="day">26</td>
<td class="day">27</td>
<td class="day">28</td>
</tr>
<tr>
<td class="day">29</td>
<td class="day">30</td>
<td class="day">31</td>
<td class="new day">1</td>
<td class="new day">2</td>
<td class="new day">3</td>
<td class="new day">4</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Сегодня</th>
</tr>
<tr>
<th colspan="7" class="clear" style="display: none;">Очистить</th>
</tr>
</tfoot>
</table>
</div>
<div class="datepicker-months" style="display: none;">
<table class="table-condensed">
<thead>
<tr>
<th colspan="7" class="datepicker-title" style="display: none;"></th>
</tr>
<tr>
<th class="prev" style="visibility: visible;">«</th>
<th colspan="5" class="datepicker-switch">2018</th>
<th class="next" style="visibility: visible;">»</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7"><span class="month focused">Янв</span><span class="month">Фев</span><span class="month">Мар</span><span class="month">Апр</span><span class="month">Май</span><span class="month">Июн</span><span class="month">Июл</span><span class="month">Авг</span>
<span class="month">Сен</span><span class="month">Окт</span><span class="month">Ноя</span><span class="month">Дек</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Сегодня</th>
</tr>
<tr>
<th colspan="7" class="clear" style="display: none;">Очистить</th>
</tr>
</tfoot>
</table>
</div>
<div class="datepicker-years" style="display: none;">
<table class="table-condensed">
<thead>
<tr>
<th colspan="7" class="datepicker-title" style="display: none;"></th>
</tr>
<tr>
<th class="prev" style="visibility: visible;">«</th>
<th colspan="5" class="datepicker-switch">2010-2019</th>
<th class="next" style="visibility: visible;">»</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7"><span class="year old">2009</span><span class="year">2010</span><span class="year">2011</span><span class="year">2012</span><span class="year">2013</span><span class="year">2014</span><span class="year">2015</span><span class="year">2016</span>
<span class="year">2017</span><span class="year focused">2018</span><span class="year">2019</span><span class="year new">2020</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Сегодня</th>
</tr>
<tr>
<th colspan="7" class="clear" style="display: none;">Очистить</th>
</tr>
</tfoot>
</table>
</div>
<div class="datepicker-decades" style="display: none;">
<table class="table-condensed">
<thead>
<tr>
<th colspan="7" class="datepicker-title" style="display: none;"></th>
</tr>
<tr>
<th class="prev" style="visibility: visible;">«</th>
<th colspan="5" class="datepicker-switch">2000-2090</th>
<th class="next" style="visibility: visible;">»</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7"><span class="decade old">1990</span><span class="decade">2000</span><span class="decade">2010</span><span class="decade">2020</span><span class="decade">2030</span><span class="decade">2040</span><span class="decade">2050</span><span class="decade">2060</span>
<span class="decade">2070</span><span class="decade">2080</span><span class="decade">2090</span><span class="decade new">2100</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Сегодня</th>
</tr>
<tr>
<th colspan="7" class="clear" style="display: none;">Очистить</th>
</tr>
</tfoot>
</table>
</div>
<div class="datepicker-centuries" style="display: none;">
<table class="table-condensed">
<thead>
<tr>
<th colspan="7" class="datepicker-title" style="display: none;"></th>
</tr>
<tr>
<th class="prev" style="visibility: visible;">«</th>
<th colspan="5" class="datepicker-switch">2000-2900</th>
<th class="next" style="visibility: visible;">»</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7"><span class="century old">1900</span><span class="century">2000</span><span class="century">2100</span><span class="century">2200</span><span class="century">2300</span><span class="century">2400</span><span class="century">2500</span>
<span class="century">2600</span><span class="century">2700</span><span class="century">2800</span><span class="century">2900</span><span class="century new">3000</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Сегодня</th>
</tr>
<tr>
<th colspan="7" class="clear" style="display: none;">Очистить</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
