Last active
November 6, 2017 00:42
-
-
Save douglascayers/27941e99b0c18e9eb002775f5b9e4aab to your computer and use it in GitHub Desktop.
Using jQuery UI Date Picker in Lightning Component as of Winter '17 with LockerService activated
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
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) { | |
} | |
}) |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Known issue being tracked by W-3210453