How to give Bootstrap Datepicker Fade effects?

Question

I am using Bootstrap Datepicker in a Symfony application. I would like to get the fadeIn and fadeOut effect when opening and closing Datepicker. As the library doesn't have any documentation which deals with this, is there any way I could tweak it myself?

The following is the twig file where the Datepicker gets initialized:

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

I edited the source of bootstrap-datepicker.js. Look at lines 479-486.

change:

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