Wie gibt man Bootstrap Datepicker Fade Effekte?

Question

Ich verwende Bootstrap Datepicker in einer Symfony-Anwendung. Ich möchte den FadeIn und FadeOut Effekt beim Öffnen und Schließen von Datepicker erhalten. Da die Bibliothek keine Dokumentation hat, die sich damit befasst, gibt es eine Möglichkeit, sie selbst zu optimieren?

Im Folgenden ist die Zweig-Datei, in der Datumsauswahl initialisiert wird:

{% block body %} 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="carousel" id="myCarousel" data-ride="carousel"> 
       <ol class="carousel-indicators"> 
       <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
       <li data-target="#myCarousel" data-slide-to="1"></li> 
       <li data-target="#myCarousel" data-slide-to="2"></li> 
      </ol> 

      <div class="carousel-inner" role="listbox"> 
       <div class="item active"> 
        <img src="{{ asset('../../../../../images/image-1.jpg') }}"> 
       </div> 

       <div class="item"> 
        <img src="{{ asset('../../../../../images/image-2.jpg') }}"> 
       </div> 

       <div class="item"> 
        <img src="{{ asset('../../../../../images/image-3.jpg') }}"> 
       </div> 
      </div> 

      <div class="form-contents"> 
       <div class="row"> 
        {{ form_start(form, {'attr': {'autcomplete':'off'}}) }} 
        {{ form_errors(form) }} 

        <div class="form-group col-xs-6"> 
         {{ form_label(form.Place, 'Where') }} 
        </div> 

        <div class="form-group col-xs-6"> 

         {{ form_label(form.Date, 'When') }} 
         {{ form_errors(form.Date) }} 
         {{ form_widget(form.Date, {'attr': {'class':'form-control','autcomplete':'off', 'placeholder':'Pick a day', 
                'data-provide':'datepicker', 'readonly':'', 'data-date-today-highlight':false, 
                'data-date-format':'dd/mm/yyyy', 'data-date-autoclose': true 
                } 
         })}} 

        </div> 
       </div> 

       <div class="row"> 
        <div class="col-xs-12"> 
         {{ form_row(form.save, {'attr': {'class':'btn btn-lg'}}) }} 
        </div> 

        {{ form_end(form) }} 
       </div> 
      </div> 
      {{ parent() }} 
     </div> 
    </div> 
</div> 
{% endblock %} 

Answer 1

http://codepen.io/anon/pen/grKwLz

ich die Quelle von Bootstrap-datepicker.js bearbeitet. Schauen Sie sich die Zeilen 479-486 an.

Änderung:

 this.picker.css("opacity", 0); 
     this.picker.show(); 
     this.picker.animate(
      { 
       "opacity": 1 
      }, 
      400 
     );