I want to display a Datetime picker using Lightning Design System.
So far, I am just able to display Date picker using SLDS and Appiphony Lightning JS.
More details : Date picker using Appiphony Lightning JS
But anyone could please help me with the time component using SLDS, so that I would be able to construct Datetime picker in SLDS.
Using the SLDS style date picker is great.
I wrote a blog post here on how to create a SLDS style datepicker.
Once you implement the code in the blog post & the date picker looks like below:
(source: minerva18.com)
Blog Post -- http://www.minerva18.com/blog/creating-lightning-design-datepicker-salesforce/
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.
Best Answer
Ok I think that you can go with two approaches nowadays.
First one (easier, recommended)
Using lightning:input as it is currently developed by salesforce component for lightning.
Easy peasy lemon squeezy:
Second approach which lets you manually customize everything but with slds classes is descirbed in the SLDS documentation.
Date Picker SLDS
And full copy paste in case if reference will be down