<style scoped>
  body {
    background: #fafafa !important;
  }
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">

<div style="padding: 60px; width: 270px;">
  <label>Date</label>
  <input id="datepicker" type="text" class="form-control" value="01-01-2012">
</div>

<script   src="https://code.jquery.com/jquery-2.2.4.js"   integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="   crossorigin="anonymous"></script>

<script src="https://rawgit.com/eternicode/bootstrap-datepicker/master/dist/js/bootstrap-datepicker.js"></script>
<script src="https://rawgit.com/eternicode/bootstrap-datepicker/master/dist/locales/bootstrap-datepicker.da.min.js"></script>
var legacyLang = navigator.language || navigator.userLanguage;
var lang = navigator.languages ? navigator.languages[0] : legacyLang;
var format = 'yyyy-mm-dd';

if (lang === 'dk' || lang === 'dk-DA') {
  format = 'dd-mm-yyyy';
} else if (lang === 'en-US') {
  format = 'mm/dd/yyyy';
} else if (lang === 'en-UK') {
  format = 'dd/mm/yyyy';
} // etc

$('#datepicker').datepicker({
  format: format,
  autoclose: true,
  todayHighlight: true,
  language: lang, 
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.