7

I have a lightning:icon next to a ui:inputDate like so. When clicking into the input area, the calendar datepicker pops up, as expected.

Is it possible to treat a click event on the calendar icon as if the user clicked into the box? i.e. is there a way to make the calendar datepicker pop up when the lightning:icon is clicked?

<div style="display:inline-block;margin-right:10px">
    <lightning:icon iconName="utility:event"/>
</div>
<div style="display:inline-block">
    <ui:inputDate aura:id="dateInput" class="slds-input" displayDatePicker="true" />
</div>

enter image description here

6

Add an onclick to the div and use something similar to (Pardon my naming):

Component

<aura:component description="myProblemComponent" implements="flexipage:availableForAllPageTypes">

    <div style="display:inline-block;margin-right:10px" onclick="{!c.openPicker}">
        <lightning:icon iconName="utility:event"/>
    </div>
    <div style="display:inline-block">
        <ui:inputDate aura:id="dateInput" class="slds-input" displayDatePicker="false" />
    </div>

</aura:component>

Controller

({

    openPicker: function(component,event,handler){
        var y = component.find("dateInput");
        var t = y.getEvent("openPicker");
        t.fire();
    }
})

shorten code as you see fit

the ui:inputDate registers an event handler for openPicker that you can fire

Fire a component event to communicate data to another component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_component_fire.htm

Although the default component has a cal icon to the right in the input so not sure why it is not showing up in your example

enter image description here

  • Hey Eric - you're right about the cal icon, I took the screenshot when I had displayDatePicker=false. Was there anywhere specific you found the openPicker event for inputDate? component.find("dateInput").getEvent("openPicker"); is returning null – Brian Mansfield Mar 8 '17 at 23:24
  • Here is the details on the component: github.com/forcedotcom/aura/blob/master/aura-components/src/… - And without seeing how you have everything it is hard to tell. I am displaying the component on the right side of the detail page. updating answer with full component so you can plug and play try it - done. It works without issue for me – Eric Mar 8 '17 at 23:29
  • I created a component with only the icon and the inputdate, the difference was that I tested it in a lightning app, and it sounds like you tested it on a page - I'm on my phone now but this sounds like the right approach, I just have some kinks to iron out. Marking as accepted, thanks as always for your help! – Brian Mansfield Mar 8 '17 at 23:44
  • @BrianMansfield - Anytime. Please do leave a comment when you find out why it works not he page and not the lightning app. Interested in knowing that. – Eric Mar 8 '17 at 23:46
  • @BrianMansfield - ahh, you may have to add the event to the app dependency although not sure which event it is unless it is ui:openPicker that you need to add. Most likely a dependency issue though – Eric Mar 8 '17 at 23:57

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.