Как закрыть блок toogle при пропадании фокуса или при помощи esc?

$(function() { 
  $(".nenezid").click(function() { 
    $("#datapicker").toggle(); 
  }); 
}); 
document.addEventListener("click", function(listenerEvent) { 
  if ($(listenerEvent.target).closest('#datapicker').length === 0) { 
    $('#datapicker').hide(); 
  } 
});

<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>