8

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

Improve this question

1 Answer 1

Reset to default
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

Improve this answer
6
  • 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, 2017 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, 2017 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, 2017 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, 2017 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, 2017 at 23:57

You must log in to answer this question.

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