How To Restrict Past Dates From Date Picker In Lightning Component

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.


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)
  • 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 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 [Lightning Application]

Output :


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  🙂

(Visited 9,602 times, 1 visits today)

9 thoughts on “How To Restrict Past Dates From Date Picker In Lightning Component”

  1. How to bring calender Icon withing Input.I am using

    showOn: “button”,
    buttonImage: $A.get(‘$Resource.ASRP_CalenderImage’),
    buttonImageOnly: true

    calender is coming but next to input box.

    Please tell me.

  2. Good day! Since you’re reading this message then you’ve proved that contact form advertising works! We can send your ad to people via their contact us form on their website. The advantage of this kind of advertising is that messages sent through contact forms are inherently whitelisted. This increases the chances that your advertisement will be opened. Never any PPC costs! Pay a one time fee and reach millions of people. For details send a message to: [email protected]

  3. Hi,
    Nice article.

    How can I show just next month’s dates & all other dates should be disabled using above JQuery static resource?

    Thank you in advance.


Leave a Comment