如何在HTML示例中实现bootstrap-datepicker沙箱 [英] How to implement bootstrap-datepicker sandbox in HTML example

问题描述

我在下面的链接中找到了bootstrap的datepicker，好吧，我下载了开发版本，然后在那里的页面配置了一些设置，并在附加了所需的样式表和javascript文件后，仍然我不能得到一个HTML示例。

I found out the datepicker for bootstrap at the link below, well, i downloaded the development version, and then after configuring some settings at the page in there, and after attaching the required stylesheets and javascript files, still i can't get an HTML example working.

这是 link 以供下载示例。

我收集了所需的CSS和JS，如下所示：

I gathered the required CSS and JS as below:

  <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
  <link href="build/build_standalone.less.css" rel="stylesheet" type="text/css">
  <link href="css/datepicker.css" rel="stylesheet" type="text/css">


  <script type="text/javascript" src="js/bootstrap.js"></script>
  <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="js/bootstrap-datepicker.js"></script>

HTML如下：

    <div class="input-daterange input-group" id="datepicker">
        <input type="text" class="input-sm form-control" name="start" />
        <span class="input-group-addon">to</span>
        <input type="text" class="input-sm form-control" name="end" />
    </div>

文件末尾的JS脚本如下：

The JS script at the end of the file as below:

    <script>

      $('#sandbox-container .input-daterange').datepicker({
         startDate: "-12/30/2014",
         endDate: "+01/15/2015",
         startView: 1,
         clearBtn: true,
         calendarWeeks: true,
         autoclose: true,
         todayHighlight: true
       });
  </script>

现在两个输入显示但它们不起作用，我不知道丢失了什么。我也在下载的演示文件中找不到任何HTML示例，它们都是.md，.jason和其他格式似乎是原始的，我实际上并不知道如何在HTML文件中实现它。

Now the two inputs appear but they don't work, I don't know whats missing. I also can't find any HTML examples in the downloaded files for the demo, it's all .md, .jason, and other formats that it seems to be raw and I don't know actually how to implement this simply in HTML file.

推荐答案

我的HTML中没有看到＃sandbox-container ：

I don't see #sandbox-container in your HTML:

<div id="sandbox-container">        
    <div class="input-daterange input-group" id="datepicker">
        <input type="text" class="input-sm form-control" name="start" />
        <span class="input-group-addon">to</span>
        <input type="text" class="input-sm form-control" name="end" />
    </div>
</div>

这篇关于如何在HTML示例中实现bootstrap-datepicker沙箱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！