内联datepicker 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&language=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选择器以指向占位符<div>的ID（例如#calendar） - 请参阅下文：

＆＃13;

＆＃13;

$('#calendar').datepicker({
  language: "nl", 
  calendarWeeks: true, 
  todayHighlight: true
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;