2016-07-26 61 views
1

我在Symfony應用程序中使用Bootstrap Datepicker。我想在打開和關閉Datepicker時獲得淡入和淡出效果。由於圖書館沒有任何文件處理這個問題,我有什麼辦法可以自己調整它嗎?如何給Bootstrap Datepicker淡入淡出效果?

以下是其中日期選擇器被初始化樹枝文件:

{% 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 %} 

回答

0

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

我編輯自舉-datepicker.js的來源。看第479-486行。

變化:

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