0

I'm trying to use Jquery Date Picker "https://jqueryui.com/datepicker/" in Salesforce Lightning Component. I've included required library files. It is working in Visualforce Page. But the same is not working in Lightning Component see below error image.

Can anyone please advice me on this?

Lightning Component and Controller

<aura:component >
<ltng:require scripts=" /resource/jqueryDatePicker1/jqueryDatePicker1/jquery-1.12.4.js,
                       /resource/jqueryDatePicker1/jqueryDatePicker1/jquery-ui.js"
              />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<p>Date: <input type="text" id="datepicker"/></p> 

({

  doInit : function(component, event,helper) {
    console.log('doneRendering');
    console.log(jQuery);
    var j$ = jQuery.noConflict();
    j$( "#datepicker" ).datepicker({
        changeMonth: true,
        changeYear: true
    });

}

}) enter image description here

VF Page

 <p>Date: <input type="text" id="datepicker"/></p>

<script>
var j$ = jQuery.noConflict();
j$( function() {
    j$( "#datepicker" ).datepicker({
        changeMonth: true,
        changeYear: true
    });
} );

enter image description here

  • It doesn't look like you have jQuery included in your '<ltng:require>' tag. – Sebastian Kessel Jan 7 '17 at 16:32
1

Component's init handler is called long before scripts are loaded. So, You need to add afterScriptsLoaded={!c.methodName} to the <ltng:require /> tag, which inturn invokes the controller method where you can access the jQuery.

Here's an example:

component:

    <aura:component>
        <ltng:require scripts="/resource/jqueryDatePicker1/jqueryDatePicker1/jquery-1.12.4.js,/resource/jqueryDatePicker1/jqueryDatePicker1/jquery-ui.js"
                      afterScriptsLoaded="{!c.setScriptLoaded}"/>

    </aura:component>

controller:

({
    "setScriptLoaded" : function(cmp){
        console.log(jQuery);
    }
})

Right place to do DOM Manipulation is in the Renderer. You can use the afterRender to access the DOM.

Renderer:

afterRender: function(component, helper) {
    this.superAfterRender();
    console.debug('afterRender $: ',jQuery);
}

If using afterRender doesn't work, look at this answer this might help.

| improve this answer | |
3

The lightning developer guide strongly recommend against using other javacsript libraries with lightning. Instead why use lightning components such as

<ui:inputDate>

or

<lightning:input type="date">

It's going to save you a bunch of time, and you won't get weird bugs because different javascript libraries are fighting for control of the DOM.

| improve this answer | |
  • +1, although I'd add lighting:input is preferable, because then you get an actual Lightning-styled date picker. – sfdcfox Jan 8 '17 at 18:59
  • agreed, the lightning namespace is really the preferred way to go. – Krone Jan 9 '17 at 18:17
0

How about ui:inputDate ? Lightning design system is already included in it.

See the reference here: https://developer.salesforce.com/docs/atlas.en-us.206.0.lightning.meta/lightning/aura_compref_ui_inputDate.htm

| improve this answer | |
  • Have you verified this? I don' think it's formatted using slds and it also says this: Note: This feature isn't generally available unless or until Salesforce announces its general availability in documentation or in press releases or public statements. We can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features. – Caspar Harmer Jan 9 '17 at 1:57
  • Hi! I've made a mistake and linked the v39.0 documentation (Spring 17). It is available in 38 as well, we are using it in our package. It is formatted with slds, the only issue that its not perfect in visualforce, so you might need some extra css hacks. In Lightning Experience it's perfect. Just add the displayDatePicker="true" attribute. – Peter Tempfli Jan 10 '17 at 7:11
  • If the picker looks like this: imgur.com/a/xmFui then it's not lightning - if it really looks like a lightning picker, I'd be interested to see how you did that. – Caspar Harmer Jan 11 '17 at 21:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.