embedded/inline bootstrap-datepicker with keyboardNavigation

keyboardNavigation appears to work for embedded/inline bootstrap-datepickers despite what the docs claim.

by Glynne Turner

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<p>Press <kbd>tab</kbd> to set focus on the embedded/inline datepicker.</p> 

<p>You can navigate the numeric dates with the arrow keys and select one by pressing <kbd>Enter</kbd>.</p>
<br>
<div class="datepicker js-datepicker-inline" tabindex="0"></div>

CSS

body {
  text-align: center;
  margin: 3rem 1rem;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

.datepicker {
  display: inline-block;
}

JavaScript

$(function () {
	var DATE_FORMAT = 'm/d/yy';
  var $datepicker = $('.js-datepicker-inline');
  
	$datepicker.datepicker({
    format: DATE_FORMAT,
     startDate: new Date(),
    templates: {
        leftArrow: '<i class="fa fa-chevron-left"></i>',
        rightArrow: '<i class="fa fa-chevron-right"></i>'
    } 
  });
});