Datepicker in Modal

detail.html

{% block content %}
    <button class="btn btn-primary waves-effect waves-light" data-trigger="hover" data-toggle="modal" 
      data-target="#bulkEnrollModal">
        Enroll
    </button>
{% endblock content %}

{% block modal %}
    <div class="modal fade right" id="bulkEnrollModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false">
        <div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <p class="heading lead">Bulk Enroll Devices</p>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" class="white-text">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="text-center">
                        <i class="fa fa-fw fa-desktop fa-4x mb-3"></i>
                        <i class="fa fa-fw fa-laptop fa-4x mb-3"></i>
                        <i class="fa fa-fw fa-tablet fa-4x mb-3"></i>
                        <p><strong></strong></p>
                        <p>Select a ship date and the devices that were delivered on that date.</p>
                    </div>
                    <hr>
                    <section class="form-simple">
                        <form method="post">
                            <div class="md-form">
                                {{ start_transaction_form.ship_date }}
                                <label for="{{ start_transaction_form.ship_date.label }}">Ship Date</label>
                            </div>
                            <div class="md-form">
                                {{ start_transaction_form.devices }}
                                <label for="{{ start_transaction_form.devices.label }}">Devices</label>
                            </div>
                        </form>
                    </section>
                </div>
                <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-primary-modal waves-effect waves-light">Enroll <i class="fa fa-plus ml-1"></i></a>
                <a type="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">Cancel</a>
                </div>
            </div>
        </div>
    </div>
{% endblock modal %}

{% block footer_javascript_page %}
    <script>
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });

        // Data Picker Initialization
        $('.datepicker').pickadate();
    </script>
{% endblock %}