How to implement bootstrap-datepicker sandbox in HTML example

问题

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.

This is the link for the example to download.

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 as below:

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

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>

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.

回答1:

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>

来源：https://stackoverflow.com/questions/27684385/how-to-implement-bootstrap-datepicker-sandbox-in-html-example

标签

javascript

jquery

twitter-bootstrap

datepicker