Using jQuery UI Date Picker in Lightning Component as of Winter '17 with LockerService activated

jQueryDatePickerComponent.html

<aura:component>
	
    <ltng:require scripts="{!join(',', $Resource.jquery_2_2_4_js, $Resource.jquery_ui_1_12_1 + '/jquery-ui.min.js')}"
                  afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
    
    <ltng:require styles="{!$Resource.jquery_ui_1_12_1 + '/jquery-ui.min.css'}"/>
    
    <p>
    	Start Date: <input aura:id="startDate" type="text" onfocus="{!c.initDatePicker}"/>
    </p>
    
    <p>
    	End Date: <input aura:id="endDate" type="text" onfocus="{!c.initDatePicker}"/>
    </p>
    
</aura:component>

jQueryDatePickerComponentController.js

({
    initDatePicker : function(component, event, helper) {
        
        // Note, Salesforce provides <lightning:input type="date"> and <ui:inputDate> components
        // that use the browser's HTML5 date picker controls. That's recommended solution.
        // 
        // But, if you really wanted to use jQuery UI DatePicker widget, then you need this
        // tweak to workaround issue with LockerService.
        // 
        // With LockerService enabled then jquery datepicker widget is not closing itself
        // so workaround is to force remove the generated element from the page.
        // Neither using .datepicker('close') or .datepicker('destroy') methods worked.
        // Since we're removing the generated elements on close, we need to always
        // re-instantiate the datepicker when the user adds focus to the input, which
        // is why this is happening in this method, which is the onfocus event handler for the input.
        
        jQuery( event.srcElement ).datepicker({
            onClose : function( dateText, instance ) {
                jQuery('#ui-datepicker-div').remove();
            }
        }).datepicker('show');
        
    },
    
	afterScriptsLoaded : function(component, event, helper) {

	}
    
})

To render a date picker in Lightning Components, you can rely on HTML5 date input elements and let the browser / device provide an appropriate input by using these out-of-the-box components:

• <ui:inputDate>
• <lightning:input>

But if you wanted more flexibility with how the controls looked, dates to show, etc. like the good ol' days with jQuery UI Date Picker, then this gist shows you a needed workaround to get the jquery datepicker to actually close. Once opened it stays open if LockerService is activated.

Known issue being tracked by W-3210453

Hi Doug,
I am trying your same approach using JqueryUI 1.12.1 and j query 3.2.1 when i tried to load j query and try to see date picker but it is not loading the date picker.Can you share the j query static resource and more details that would be helpful