2

I have been playing with lightning and I'm surprised how difficult it is to implement a date picker. I dont intent to use this app in Salesforce1, so I need it to work without those solutions.

My Component is anyone wants to see it.

<aura:component controller="risetest.lBookings" implements="flexipage:availableForAllPageTypes">

<aura:attribute name="contacts" type="Contact[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<ltng:require styles="/resource/SLDS090/assets/styles/salesforce-lightning-design-system-ltng.css" 
              scripts="/resource/jquery,
                       /resource/moment" />

<aura:attribute name="appointments" type="risetest__Appointment__c[]"/>
<aura:attribute name="newAppointment" type="risetest__Appointment__c"
                default="{ 'sobjectType': 'risetest__Appointment__c',
                                    'Name': 'Test',
                                    'risetest__Date__c': '2016-02-15',
                                    'risetest__Start_Time__c': '10:00',
                                    'risetest__End_Time__c': '12:00'}"/>

<div class="container">
    <form class="slds-form--stacked">
        <div class="slds-form-element slds-is-required">
            <div class="slds-form-element__control">

                <ui:inputText aura:id="Name" label="Name"
                    class="slds-input"
                    labelClass="slds-form-element__label"
                    value="{!v.newAppointment.Name}"
                    required="true"/>
            </div>
        </div>
        <div class="slds-form-element slds-is-required">
            <div class="slds-form-element__control">

                <ui:inputText aura:id="AppointmentDate" label="Appointment Date"
                    class="slds-input"
                    labelClass="slds-form-element__label"
                    value="{!v.newAppointment.risetest__Date__c}"
                    required="true"/>


            </div>
        </div>
        <div class="slds-form-element slds-is-required">
            <div class="slds-form-element__control">

                <ui:inputText aura:id="StartTime" label="Start Time"
                    class="slds-input"
                    labelClass="slds-form-element__label"
                    value="{!v.newAppointment.risetest__Start_Time__c}"
                    required="true"/>
            </div>
        </div>
        <div class="slds-form-element slds-is-required">
            <div class="slds-form-element__control">

                <ui:inputText aura:id="EndTime" label="End Time"
                    class="slds-input"
                    labelClass="slds-form-element__label"
                    value="{!v.newAppointment.risetest__End_Time__c}"
                    required="true"/>
            </div>
        </div>
        <div class="slds-form-element slds-is-required">
            <label class="slds-form-element__label" for="selectSample1">Select Contact</label>
            <div class="slds-form-element__control">
                <div class="slds-select_container">
                    <div class="slds-form-element__control">
                        <ui:inputSelect  class="slds-select">
                            <aura:iteration items="{!v.contacts}" var="contact">
                                    <ui:inputSelectOption text="{!contact.Name}" label="{!contact.Name}"/>
                            </aura:iteration>
                        </ui:inputSelect>
                    </div>
                  </div>
            </div>
        </div>
        <div class="slds-form-element">
            <ui:button label="Submit" 
                   class="slds-button slds-button--neutral"
                   labelClass="label"
                   press="{!c.createAppointment}"/>
        </div>
    </form>
</div><!-- ./container-->

2 Answers 2

2

Right, so it turns out there is a component for that! All I had to do was change:

<ui:inputText aura:id="AppointmentDate" label="Appointment Date"
                    class="slds-input"
                    labelClass="slds-form-element__label"
                    value="{!v.newAppointment.risetest__Date__c}"
                    required="true"/>

To the following:

 <ui:inputDate aura:id="AppointmentDate" label="Appointment Date"
                           class="slds-input"
                           labelClass="slds-form-element__label"
                           value="{!v.newAppointment.risetest__Date__c}"
                           displayDatePicker="true" />
2

The built in DatePicker is indeed quick and easy, but looks horrible - I've just built one that uses the Lightning Design System and looks much much nicer. It's not as fully featured as the official one, but you can extend it as you see fit.

Here is the blog post link.

Here is the github link.

Once you have implemented the component, to use it, do the following:

Assuming you are using an Opportunity (obviously any object with a date would work), define the Opportunity as an attribute on your component:

<aura:attribute name="opportunity" type="Opportunity" 
                default="{ 'sobjectType': 'Opportunity',
                           'Name': 'New Opportunity',
                           'StageName': 'Some Stage' />

In your component, you need to handle the dateChangeEvent from the component:

<aura:handler name="dateChangeEvent" event="c:DateChange" action="{!c.handleDateChange}" />

In your form, put the below(once you have created it) as a top level member of the form:

<div class="slds-form-element slds-m-top--medium">
  <c:DatePicker aura:id="closeDate" label="Close Date" placeholder="Enter a Date" value="{!v.opportunity.CloseDate}" formatSpecifier="MM/dd/yyyy" />
</div>

Finally, in your controller or helper update your date:

handleDateChange: function(cmp, event, helper) {
  var dateSelector = event.getSource().getLocalId();
  if (dateSelector == 'closeDate'){
    var opp = cmp.get("v.opportunity");
    opp.CloseDate = event.getParam("value");
  }
}

Here's what it looks like:

Datepicker gif

1
  • +1, I am using Caspar's and it is very well designed, easy to extend Mar 9, 2017 at 21:23

You must log in to answer this question.

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