Jquery Datepicker in Lightning Components for better control on behaviour of Datepicker

Having trouble with <lightning:input type=”date”> and <ui:inputDate> components? Then why don’t you use Jqyery Datepicker?

Jquery datepicker gives a lot of flexibility and freedom to developers to let them use a datepicker as per business needs. A developer can enforce validation on dates and date range which is very hard to impose using these out-of-the-box components as they rely on HTML5 input element.

Following component is using the jquery datepicker to get the date of birth from users.

JqueryDatePicker.cmp

<aura:component >
    <ltng:require scripts="{!join(',', $Resource.jquery_2_2_4, $Resource.jquery_ui_1_12_1 + '/jquery-ui-1.12.1/jquery-ui.min.js')}"
    afterScriptsLoaded="{!c.afterScriptsLoaded}" 
    styles="{!$Resource.jquery_ui_1_12_1 + '/jquery-ui-1.12.1/jquery-ui.min.css'}"
    />

    Birth Date: <input aura:id="birthdate" class="datepicker" type="text"/>
 
</aura:component>

JqueryDatePickerController.js

({
    afterScriptsLoaded : function(component, event, helper) {
       $('.datepicker').datepicker();
    }
})

 

NOTE –

In the above example, I used an old version of jquery which is jquery-2.2.4 due to LockerService bug. LockerService’s SecureWindow does not support a ‘hasOwnProperty’ method which is being used in the latest versions of the jQuery library.

Preview

20171006-021715_capture

2 thoughts on “Jquery Datepicker in Lightning Components for better control on behaviour of Datepicker

  1. Hi Naval,
    Can you share library and to load because even i tried with latest jquery3.2.1 and jquery.1.12.1.It is not loading properly. and datepicker is not appearing

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s