Angularjs 引导数据采集器实现

我希望有人能帮我解决这个小问题。我认为这很简单，但不是一个javascript、html的家伙；我发现实施起来有点困难

基本上，我使用的是我想要实现的引导数据采集器

我发现下面的网站允许我调整日历并提供适当的代码。

我正在尝试实现内联/嵌入式日历，下面给出了代码

$('#sandbox-container div').datepicker({
multidate: true

})

但我不确定如何实现沙箱容器

在我的html中，我做了以下工作

<script>
$('.datepicker').datepicker({
    multidate:true
})

从日历中选择日期时，会自动添加/删除日期列表。

---

我希望它对您有所帮助。

第一个错误是，您在引导数据采集器之后定义了jquery。datepicker很可能依赖于jquery

第二个错误，您在div准备好之前就有了脚本，因此在脚本运行时，div不存在

最好在head部分中有引用，并记住顺序很重要，并且将脚本放在body部分的底部，这样可以确保按时加载dom元素

<script src="/resources/js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/resources/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="/resources/bootstrap-3.0.0/css/bootstrap.min.css" media="screen, projection">



<div class="col-md-3">
    <h5>Pickup Dates</h5>

    <!--Inline DatePicker-->
    <div class="datepicker">
    </div>
    <script>
        $('.datepicker').datepicker({
            multidate:true
        })
    </script>
    <!--------------------->



    <!--Sandbox DatePicker-->
    <div id="sandbox-container">
        <input class="form-control" type="text">
    </div>
    <script>
        $('#sandbox-container input').datepicker({
        });
    </script>
    <!--------------------->


</div>

---

你能给我们看一下你的html代码吗？你引用了哪些文件？脚本在div下吗？我已经添加了一些额外的信息。一些css应该用于引导日期选择器谢谢，已经更改了顺序，现在日历主题已经更改，看起来就像前面提供的链接中的一样。但是，不能点击日期，没有什么是高亮的，只能改变月份。它应该是什么样子？非常感谢JDFIDLE。检查后，我意识到datepicker3.css是必需的。我已经添加了这一点，它工作得非常完美。谢谢你的帮助。哦，出于某种原因，我认为你已经包括了它，但没有在你的样本中显示它…：-你是对的，我说我还有一些其他文件，但因为我引用了太多的文件，我不想包括所有这些文件，也不是100%哪些文件可能是相关的：

<script type="text/javascript" src="/resources/js/bootstrap-datepicker.js"></script>
<script src="/resources/js/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="/resources/bootstrap-3.0.0/css/bootstrap.min.css" media="screen, projection">

<script>
    $('.datepicker').datepicker({
        multidate:true
    })
</script>


<div class="col-md-3">
    <h5>Pickup Dates</h5>
<div class="datepicker">
</div>


</div>

<div class="datepicker"  ng-click="test()" ></div>

  $scope.test=function(){
        $scope.selectedDates=$('.datepicker').datepicker('getDates');
    }

<script src="/resources/js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/resources/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="/resources/bootstrap-3.0.0/css/bootstrap.min.css" media="screen, projection">



<div class="col-md-3">
    <h5>Pickup Dates</h5>

    <!--Inline DatePicker-->
    <div class="datepicker">
    </div>
    <script>
        $('.datepicker').datepicker({
            multidate:true
        })
    </script>
    <!--------------------->



    <!--Sandbox DatePicker-->
    <div id="sandbox-container">
        <input class="form-control" type="text">
    </div>
    <script>
        $('#sandbox-container input').datepicker({
        });
    </script>
    <!--------------------->


</div>