title: bootstrap-datepicker implementation
body: <p>I hope someone can help me with this little problem. I think it's simple but not being a javascript,html guy; I am finding it a bit difficult to implement it.</p>
  
  <p>Basically I am using bootstrap-datepicker that I'd like to implement.</p>
  
  <p>I found the following website that allows me to tweak a calendar and provides the appropriate code.
  <a href="http://eternicode.github.io/bootstrap-datepicker/?markup=embedded&amp;format=&amp;weekStart=&amp;startDate=&amp;endDate=&amp;startView=0&amp;minViewMode=0&amp;todayBtn=linked&amp;language=en&amp;orientation=auto&amp;multidate=true&amp;multidateSeparator=&amp;todayHighlight=on&amp;keyboardNavigation=on&amp;forceParse=on#sandbox" rel="nofollow">bootstrap_dsatepicker</a></p>
  
  <p>I am trying to implment the inline/embedded calendar and the following code is given</p>
  
  <pre><code>$('#sandbox-container div').datepicker({
  multidate: true
  </code></pre>
  
  <p>});</p>
  
  <p>But I am not sure how to implement the sandbox-container</p>
  
  <p>In my html I did the following </p>
  
  <pre><code>&lt;script&gt;
  $('.datepicker').datepicker({
      multidate:true
  })
  </code></pre>
  
  <p></p>
  
  <p>and then </p>
  
  <pre><code> &lt;div class="datepicker"&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>If I call datepicker in the script, it work but the calendar theme isn't the same as the one shown by the sandbox-container. Plus even in the datepicker I am not being able to tweak(add multidate etc)</p>
  
  <p>How can I implement the code properly?</p>
  
  <p>PS:</p>
  
  <pre><code>&lt;script type="text/javascript" src="/resources/js/bootstrap-datepicker.js"&gt;&lt;/script&gt;
  &lt;script src="/resources/js/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="/resources/bootstrap-3.0.0/css/bootstrap.min.css" media="screen, projection"&gt;
  
  &lt;script&gt;
      $('.datepicker').datepicker({
          multidate:true
      })
  &lt;/script&gt;
  
  
  &lt;div class="col-md-3"&gt;
      &lt;h5&gt;Pickup Dates&lt;/h5&gt;
  &lt;div class="datepicker"&gt;
  &lt;/div&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>These are the related code that is being used. The library that I am using a lot more but I believe 
  I have all the libraries. If you believe that problem is related to file references then I will appreciate if you can tell me what files are required so I can check if I have referenced them or have them present.</p>
  
  <p>================================
  I have asked a question about how to implement the calendar that I'm using with angularjs.
  I found a way to do it which is not 100% angular but it works well</p>
  
  <p>I've added an ng-click in the datepick tag as follow:</p>
  
  <pre><code>&lt;div class="datepicker"  ng-click="test()" &gt;&lt;/div&gt;
  </code></pre>
  
  <p>In my controller I have created a function(called test() in this case) and I use the jquery method to pass the dates that have been selected:</p>
  
  <pre><code>  $scope.test=function(){
          $scope.selectedDates=$('.datepicker').datepicker('getDates');
      }
  </code></pre>
  
  <p>A list of dates are added/removed automatically as you select the dates from the calendar.
  I hope it helps</p>