1

私はBootstrap DatepickerをSymfonyアプリケーションで使用しています。 Datepickerを開いたり閉じたりするときに、fadeInとfadeOutの効果を得たいと思います。ライブラリにはこれを扱うドキュメントがありませんので、自分でそれを微調整する方法はありますか?ブートストラップデートピッカーフェード効果を与えるには?

次は、日付ピッカーが初期化される小枝ファイルです:

{% 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 
     ); 
関連する問題