title: Use "beforeShowDay" with Bootstrap-datepicker
body: <p>I use Bootstrap 3.</p>
  
  <p>Into a Bootstrap-datepicker, I have to enable dates only when there is some news get from my CMS TYPO3 v7 for this dates.</p>
  
  <p>I success to get the dates into a data attribute from a TYPO3 viewhelper :</p>
  
  <pre><code>&lt;input id="agenda-date-selector-datepicker-footer" class="agenda-date-selector-datepicker" value="{f:format.date(date:\'{weekDate}\',format:\'d-m-Y\')}" data-dates='{enableDates -&gt; ul:Datepicker()}'&gt;
  </code></pre>
  
  <blockquote>
    <p>(Don't take care of "values" it's not important here).</p>
  </blockquote>
  
  <p>Into my JS I enter into my "true" return.
  <code>(alert("true");</code> is display 10 time but I have 13 dates... strange...
  And no dates are disabled into datepicker.</p>
  
  <p>I adapt this working model to make the code <a href="http://jsfiddle.net/vCJ2u/198/" rel="nofollow noreferrer">http://jsfiddle.net/vCJ2u/198/</a> but this model use jQuery UI. </p>
  
  <p><strong>Here my code :</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
   
   if($('.section-agenda-date-selector').length){
    availableDates = $('#agenda-date-selector-datepicker-footer').data('dates');
    alert(availableDates);
    $("#agenda-date-selector-datepicker-footer").datepicker({
     maxViewMode: 2,
     language: "fr",
     autoclose: true,
     todayHighlight: true,
     //startDate: '+1d',
     //weekStart: 1,
     format: 'yyyy-mm-dd',
     beforeShowDay: function(dt){
      console.log([available(dt), "" ]);
      return [available(dt), "" ];
     }
    });
   
    initAgendaListe();
   }
  
   
  });
  
  function available(date) {
   dmy = ( '0' + date.getDate() ).slice( -2 ) + "-" + ( '0' + (date.getMonth()+1) ).slice( -2 ) + "-" + date.getFullYear();
   
   if ($.inArray(dmy.toString(), availableDates) != -1){
  //   alert("true");
    return {
     enabled : true
    };
   } else {
    return {
     enabled : false
    };
   }
  
  }
  
  function initAgendaListe(){   
   // au click sur un élément du datepicker
   $('.agenda-date-selector-datepicker').on('change', function(){
    window.location.href = '/index.php?id=19&amp;eventsbyweek='+$(this).val();
   });
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="section section-grey section-agenda-date-selector"&gt;
  ...
  &lt;/div&gt;
  
  &lt;div class="agenda-datepicker datepicker-wrapper"&gt;
    &lt;div class="input-datepicker-hidden"&gt;
     &lt;input id="agenda-date-selector-datepicker-footer" class="agenda-date-selector-datepicker" value="" data-dates='["15-06-2017","20-06-2017","29-06-2017","29-08-2017","11-09-2017","15-09-2017","17-09-2017","18-09-2017","27-09-2017","28-09-2017","29-09-2017","30-09-2017","31-10-2017"]'&gt;
    &lt;/div&gt;
    &lt;label class="btn btn-default" for="agenda-date-selector-datepicker-footer"&gt;
    &lt;i class="icon icon-left icon-agenda"&gt;&lt;/i&gt;
    Choisir une date
    &lt;/label&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>An idea please ? Any help is welcome ! :)
  Thanks in advance !</p>