<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,
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.