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

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

3 Answers 3

Reset to default
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
2
  • +1, although I'd add lighting:input is preferable, because then you get an actual Lightning-styled date picker.
    – sfdcfox
    Jan 8, 2017 at 18:59
  • agreed, the lightning namespace is really the preferred way to go.
    – Krone
    Jan 9, 2017 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
3
  • 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, 2017 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, 2017 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, 2017 at 21:54

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .