内联日期选择器 Bootstrap

Question

我正在使用附加 voor Bootstrap 以便能够使用日期选择器：https://bootstrap-datepicker.readthedocs.io/en/latest

当附加到输入字段时，它可以正常工作。

我现在试图使其内联可见，我尝试使用此工具找出代码：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&语言=nl&orientation=auto&multidate=&multidateSeparator=&calendarWeeks=on&todayHighlight=on&keyboardNavigation=on&forceParse=on#sandbox

由于某种原因，什么也不会出现。有什么建议么？

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

Answer 1

您很可能引用了#sandbox-container演示网站上使用的内容，而您的标记中可能没有这些内容。更新 jQuery 选择器以指向占位符的 ID <div>（例如#calendar） - 见下文：

$('#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>