Built Datepicker Utilizing Salesforce Lightning Design System.

Hello There,

In this blog, we will explore how to assemble Datepicker with the utilization of Appiphony Lightning JS and Salesforce Lightning Design System.

searching_calendar_anim_md_wm

With such a large number of new elements, a quite enhanced UI and a more responsive, client-based architecture, Lightning is an energizing and capable new interface for Salesforce.There are a great deal of pre-constructed UI controls that we can use to make an interface, yet there are a few imperative missing pieces. Datepicker styled with Salesforce Lightning Design System often causes style problems while integrating it into a Lightning App which moreover increases developers a headache.

Initial setup : 

Afore starting with Initial setup, get acquainted with Making the Move to Salesforce Lightning Design System (SLDS) – Introduction.

  1. Download the ‘Salesforce Lightning Design System’ Custom Scoped CSS from here , place your desired scoping class name into the “Scoping class” input and click Generate CSS. This Scoping class wraps your content using the Lightning Design System to avoid CSS conflicts. Scoping class name example : slds
  2. Download the scoped version of the Design Systems files and upload Zip folder as your static resource.
  3. We have to use Moment Js for a string to date conversions, as ‘parseDateTime()’ method is unsupportive with Lightning framework. Get moment JS here . Download and upload this file as your static resource.
  4. Download the Appiphony Lightning JS (ALJS) library from Here . Unzip the folder, search aljs.zip folder.Upload the aljs.zip folder to your static resource.

The lightning design System provides enhance implements for visual design but leaves us without the JavaScript needed to react to events and user interactions. ALJS is a library of jQuery plugins and Ember.js components which enable front-end developers to bring life to their SLDS-driven pages.Read more

On the off chance that If you don’t want to deal with ALJS and moment Js dependency and wants to create simple date dropdown with future or past date restriction, than you should visit my another blog – Date picker Combo Box with Dropdown using Lightning Design System and AngularJs.

So what are we waiting for ? AUTOBOTS, Get the ball rolling!

First of all, Let’s have visually examine the Datepicker I have developed using Appiphony Lightning JS and Salesforce Lightning Design System,

slds-datepicker-example

Datepicker

So, let’s jump into the code,

  1. Create Visualforce page, obviously you must have done it 😀 But make sure that you are setting standardStylesheets attribute as ‘false’.
  2. Include Lightning Design system CSS
  3. Include Appiphony Lightning Js Files
  4. Include Moment Js
  5. Include Jquery (In the code I am using Jquery file directly from source URL, but as a best practice you can download it, upload it as a static resource and include to page).

Show me the code!

For better understanding, I have included a particular inline remark(Comment) about code segments.


<apex:page showHeader="false" sidebar="false" docType="html-5.0" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false" >
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
								<link href="{!URLFOR($Resource.LightningDesignSystem,'assets/styles/salesforce-lightning-design-system-vf.min.css')}" rel="stylesheet" />
<!-- Include JQuery -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

 <!-- Include appiphony Lightning Js Files-->
 <script src="{!URLFOR($Resource.appiphonyLightningJs, '/jquery.aljs-init.min.js')}"></script>
<script src="{!URLFOR($Resource.appiphonyLightningJs, '/jquery.aljs-datepicker.min.js')}"></script>

 <script type="text/javascript">

 //Datepicker Code script-- Starts

 var j$ = jQuery.noConflict();
 //Assigning SLDS Static Resource Path To A Variable To Use It With ALJS Initialization

 var assetsLoc = '{!URLFOR($Resource.LightningDesignSystem)}';
 var eventDateValue = ''; 

 //Override Common Settings with SLDS Static Resource Path (Optional)
 j$.aljsInit({
 assetsLocation: assetsLoc, // Specifies the directory containing SLDS's assets directory
 scoped: true // Specifies whether or not the page is scoped using the slds class
 });

 j$(document).ready(function() {

 //Initializing Datepicker 

 j$('#date').datepicker({
 initDate: moment(), // Assign Today's Date
 format: 'DD/MM/YYYY', // Specify the Date Format Of Datepicker Input Field (YYYY-MM-DD,YYYY/MM/DD ,DD/MM/YYYY ....etc)

// onChange function to change the value once it is selected
 onChange: function(datepicker) {

// Specify the format
 eventDateValue =moment(datepicker.selectedFullDate._d).format('DD/MM/YYYY');
 }
 });
 });

 //Datepicker Code script -- Ends

 </script>
</head>
<body>
<div class="slds">
<!-- PAGE HEADER -->
<div class="slds-page-header" role="banner">
<div class="slds-media slds-media--center">
<div class="slds-media__figure">
<svg aria-hidden="true" class="slds-icon slds-icon-standard-opportunity">
<use xlink:href="{!URLFOR($Resource.LightningDesignSystem,'assets/icons/action-sprite/svg/symbols.svg#new_event')}"></use>
</svg></div>
<div class="slds-media__body">
<h1 class="slds-page-header__title slds-truncate" title="Group Events">SLDS DATEPICKER E</h1>
</div>
</div>
</div>
<!-- / PAGE HEADER -->
<div class="pagecontainer">
<div class="slds-form--stacked">
<!-- DATEPICKER CODE -->
<div class="slds-form-element">
<label class="slds-form-element__label" for="date">
Campaign Event Date
</label>
<div class="slds-form-element__control" style="width:200px;">
<div class="slds-input-has-icon slds-input-has-icon--right">
<svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
<use xlink:href="{!URLFOR($Resource.LightningDesignSystem, '/assets/icons/utility-sprite/svg/symbols.svg#event')}"></use>
</svg>
<input id="date" class="slds-input" type="text" placeholder="Select Event Date" label="Date Picker Label" /></div>
</div>
</div>
<!-- / DATEPICKER CODE --></div>
</div>
</div>
<!-- Inclcude Moment Js -->
<apex:includeScript value="{!URLFOR($Resource.moment,'')}"/>
</body>
</html>
</apex:page>

Note : You need to supersede the each static resource name with your static resource name.

The challenge is not over yet, direct assignment of selected date to Salesforce object field results to error, as selected date have a different format than Salesforce object date field format. So to make selected date compatible with object field I have converted selected date to millisecond and further assigned it to Salesforce object field, below is the code snippet for the same :


var dt = new Date(selectedDate);
var milisecondDate = dt.getTime();
$scope.campaign.Event_Date__c=milisecondDate;

So definitely, we have effectively built up the Datepicker functionality utilizing Salesforce Lightning Design System and Appiphony LightningJS.

jamesshuffle_400x225

Reference :

  1. Appiphony Lightning JS on your Visualforce pages
  2. Lightning Design System

“Should you have questions, please feel free to contact me”

Happy Learning ! Thank you 🙂

Advertisements

One thought on “Built Datepicker Utilizing Salesforce Lightning Design System

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s