内联日期选择器引导程序答案

【问题标题】：Inline datepicker Bootstrap内联日期选择器引导程序
【发布时间】：2023-03-08 09:11:01
【问题描述】：

我正在使用附加的 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>

【问题讨论】：

标签： twitter-bootstrap datepicker

【解决方案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>

【讨论】：