restrict past date

How To Restrict Past Dates From Date Picker In Lightning Component

Lightning Component

Sharing is caring!

Today in this post we are going to see, how we can restrict past date selection on data picker using jQuery UI plugin in salesforce lightning component.

          jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

restrict past date lightning

Check Also : Validation on Selection of Past Date With ‘lightning:input’ Tag In Lightning Component

In order to use jQuery UI plugin, you must include the jQuery, and jQuery UI Plugin file on your lightning component via static resources.

Pre-Steps : Download and Upload  jQuery UI Plugin & jQuery library  
Download jQuery library [version 2.2.4 Recommended]
  • Go to below link to download jQuery 2.2.4 minified version. (2.2.4 Recommendation)
  • https://code.jquery.com/jquery-2.2.4.min.js
  • For download jQuery file right click on the page and click on save as… link OR press CTRL + S button on keyboard.

  • Save the JS file on your local computer.
Download jQuery UI library [version 1.12.1 Recommended]
Step 1 : Upload jQuery UI zip file + jQuery file as a static resources in your Salesforce org.

Static resource is a file or collection of files that is stored on Salesforce. Once your jQuery UI zip file and jQuery2.2.4 JS file  is added as a static resource, it can be referenced by any of your lightning component.

  • After successfully download both files (jquery-ui-1.12.1.zip + jQuery js file) now we will upload it as a static resources.
  • For upload zip file, from Setup >> Develop >> Static Resources >> New.
  • In the Name field, enter the name which is use in lightning component.
  • Click Choose File or Browse, and select Select2 zip file you downloaded before.
  • In the Cache Control drop-down list, select Public.
  • Click on the Save button.

Follow same steps to upload both files.

jQuery 2.2.4 js file upload
jQuery 2.2.4 js file upload

jQuery UI

Step 2 : Create lightning component.  [jQueryUI.cmp]

From developer console >> file >> new >> Lightning Component 

JavaScript Controller : jQueryUIController.js

From developer console >> file >> new >> Lightning Application

demo.app [Lightning Application]

Output :

restrict past date lightning
Output Lightning Component
Some Useful Resources : 

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box  🙂

Sharing is caring!

(Visited 1,895 times, 1 visits today)

Leave a Reply