Inline datepicker Bootstrap

0
votes

I am using a add-on voor Bootstrap for be able to work with a datepicker: https://bootstrap-datepicker.readthedocs.io/en/latest

It works with no problem when attached to an input field.

I am now trying to make it visible as inline, I ahev tried to figure out the code with this tool: https://uxsolutions.github.io/bootstrap-datepicker/?markup=embedded&format=dd-mm-yyy&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&maxViewMode=4&todayBtn=false&clearBtn=false&language=nl&orientation=auto&multidate=&multidateSeparator=&calendarWeeks=on&todayHighlight=on&keyboardNavigation=on&forceParse=on#sandbox

For some reason nothing wil show up. Any suggestions?

    <div id="calendar"></div>

<!-- Datepicker -->
    <script src="includes/js/bootstrap-datepicker.js"></script>
    <script src="includes/js/bootstrap-datepicker.nl.min.js"></script>
    <script type="text/javascript">
    $('#sandbox-container calendar').datepicker({
    language: "nl",
    calendarWeeks: true,
    todayHighlight: true
    });
    </script>
1
twitter-bootstrapdatepicker

1 Answers

4
votes

Chances are you're referencing the #sandbox-container used on the demo site, which you probably don't have in your markup. Update the jQuery selector to point to the ID of your placeholder <div> (e.g. #calendar) - see below:

$('#calendar').datepicker({
  language: "nl", 
  calendarWeeks: true, 
  todayHighlight: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.nl.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet"/>

<div id="calendar"></div>