Creating A Lightning Design Datepicker in Salesforce Visualforce

Creating A Lightning Design Datepicker in Salesforce Visualforce

Raghavendhra Yarlagadda's photo
Raghavendhra Yarlagadda
·

3 min read

Table of contents

Hello There! Welcome Back 🙂

Today we are gonna learn how to create a lightning design style date picker in salesforce visualforce.

Things we will be using:

  1. Salesforce Lightning Design System

  2. MomentJS

  3. Appiphony Lightning JS (ALJS)

  4. jQuery

So, Let’s get started!

Step 1: Gathering the resources we need.

  1. Salesforce Lightning Design System:

    1. Download the Custom Scoped CSS form here with your desired Scoping Class. (be sure to prefix your scoping class with a dot)
      The Scoping class wraps your content using the Lightning Design System to avoid CSS conflicts.
      I am using “slds” as a scoping class in my case.

    2. The file you download will be named “salesforce-lightning-design-system.zip”, just rename it to something convenient and short like “LDS”.

    3. Upload the zip file as your Static Resource.

  2. MomentJS:
    We will be using CDN for this here, you can always have it as a static resource. Either way is fine.
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js"></script>

  3. Appiphony Lightning JS (ALJS):

    1. Download the library from its website here (ignore the part about slds in the download page, just download the library).

    2. Extract the zip > Find the aljs.zip file in the extracted folder: –> appiphony-lightning-js-master > dist > aljs.zip

    3. Upload the aljs.zip folder to your static resource.

Now we have all the stuff we need.

Step 2: The code.

  1. First we put all the resources into the page.

  2. Then, create a SLDS style input, to know more on getting started with The Lightning Design System you can refer my another blog post.

  3. Finally, Initialize aljs & datepicker using momentJS.

<apex:page standardStylesheets="false">
   <!– Lightning Design System Source –>
   <apex:stylesheet value="{!URLFOR($Resource.SLDS0121, ‘assets/styles/salesforce-lightning-design-system-vf.css’)}" />
   <!– jQuery CDN –>
   <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
   <!– MomentJS CDN –>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js"></script>
   <!– Important To Include ALJS init File–>
   <script src="{!URLFOR($Resource.aljs, ‘/jquery/jquery.aljs-init.min.js’)}"></script>
   <!– ALJS Datepicker Module–>
   <script src="{!URLFOR($Resource.aljs, ‘/jquery/jquery.aljs-datepicker.min.js’)}"></script>
   <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <div class="slds">
         <div class="slds-form-element">
            <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.SLDS0121, ‘/assets/icons/utility-sprite/svg/symbols.svg#event’)}"></use>
                  </svg>
                  <input id="date" class="slds-input" type="text" placeholder="Pick a Date" label="Date Picker Label"/>
               </div>
            </div>
         </div>
         <span id="SelectedDate"></span>
      </div>
      <script>
         var j$ = jQuery.noConflict();
         //Assigning SLDS Static Resource Path To A Variable To Use It With ALJS Initialization
         var assetsLoc = ‘{!URLFOR($Resource.SLDS0121)}’;

         //ALJS Initialization

         j$.aljsInit({
         assetsLocation: assetsLoc, //SLDS Static Resource Path
         scoped: true
         });

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

         //Initializing Datepicker with options To The SLDS Input on document ready.

         j$(‘#date’).datepicker({
         initDate: moment(), //Today Date
         format: ‘YYYY/MM/DD’, //Date Format Of Datepicker Input Field
         onChange: function(datepicker) {
         j$(‘#SelectedDate’).html(‘Selected Date: <strong>’+moment(datepicker.selectedFullDate._d).format(‘YYYY/MM/DD’)+'</strong>’);
         }
         });
         });
      </script>
   </html>
</apex:page>

That is it! And your date picker will look like this:

Congrats, we just created the Lightning Design style Datepicker. Looks Beautiful Right?

If you like the content, give it some sharing :)

SalesforceJavaScript