Jquery Datepicker in Lightning Components for better control on behaviour of Datepicker

JqueryDatePicker.cmp

<aura:component >
    <ltng:require scripts="{!join(',', $Resource.jquery_2_2_4, $Resource.jquery_ui_1_12_1 + '/jquery-ui-1.12.1/jquery-ui.min.js')}"
    afterScriptsLoaded="{!c.afterScriptsLoaded}" 
    styles="{!$Resource.jquery_ui_1_12_1 + '/jquery-ui-1.12.1/jquery-ui.min.css'}"
    />

    Birth Date: <input aura:id="birthdate" class="datepicker" type="text"/>
 
</aura:component>

JqueryDatePickerController.js

({
    afterScriptsLoaded : function(component, event, helper) {
       $('.datepicker').datepicker();
    }
})