引导-数据采集器实现

Question

我希望有人能帮我解决这个小问题。我认为这很简单，但不是javascript，html；我发现实现它有点困难。

基本上，我使用的是我想实现的引导-数据报警器。

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

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

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

})；

但是我不知道如何实现沙箱容器。

在我的html中，我执行了以下操作

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

​

然后

 <div class="datepicker">
        </div>

如果我在脚本中调用datepicker，它可以工作，但日历主题与沙箱容器显示的主题不一样。另外，即使在数据采集器中，我也无法调整(添加多个日期等)。

如何正确地实现代码？

PS：

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

这些是正在使用的相关代码。我正在使用的图书馆更多，但我相信我拥有所有的图书馆。如果你认为这个问题与文件引用有关，那么如果你能告诉我需要什么文件，我会很感激，这样我就可以检查我是否引用过它们，或者让它们存在。

================================我问了一个关于如何实现与angularjs一起使用的日历的问题。我找到了一种方法，虽然不是100%的角度，但效果很好。

我在datepick标记中添加了ng单击，如下所示：

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

在我的控制器中，我创建了一个函数(在本例中称为test() )，并使用jquery方法传递选定的日期：

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

在从日历中选择日期时，会自动添加/删除日期列表。我希望它能帮上忙

Answer 1

第一个错误是，您在引导后定义了jquery -datepicker。datepicker很可能依赖于jquery。

第二个错误是，在div准备好之前，您已经准备好了脚本，所以在运行脚本时div并不存在。

最好在head部分中有引用，并记住顺序很重要，并将脚本放在主体部分的底部，这样就可以确保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>

JS Fiddle演示