Restrict Past or Future date selection in Lightning Component Salesforce

Kapil October 27, 2020

In this article you will learn how you can restrict user to select Past Dates or Future Dates using Date Picker in Lightning Component.

Step : 1

Download below JQuery UI & Plugin

1. JQuery UI

2. Plugin

Step : 2

Upload JQuery UI & Plugin as static resource in your org. In below example I am uploading JQuery UI zip file as DateJQuery and Plugin js file as jqueryminjs.

Just make sure the cache control is public while creating static resources.

Step : 3

First we will try script to block past dates. Please create component and controller as shown below :

Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <ltng:require styles="{! $Resource.DateJQuery + '/jquery-ui-1.12.1/jquery-ui.min.css'}" 
                  scripts="{!join(',', 
                           $Resource.jqueryminjs ,   
                           $Resource.DateJQuery + '/jquery-ui-1.12.1/jquery-ui.min.js')
                           }" afterScriptsLoaded="{!c.runScripts}"/>
    
    <input type="text" class="slds-input" id="mydatepicker" />
    <lightning:button variant="brand" onclick="{!c.getDate}" label="Get Date"/>
</aura:component>

Controller

({
	runScripts : function(component, event, helper) {
        $(document).ready(function(){ 
            $( "#mydatepicker" ).datepicker({
                beforeShowDay: function(date) {
                    var today = new Date();
                    if(date > today){
                        return [true];
                    }
                    else{
                        return [false];
                    }	 
                },
            });           
        });
    },
    
    getDate : function(component,event,helper){
        var oDate = $('#mydatepicker').val();
        alert(oDate);
        
    } 
})

The above component will restrict user to select past dates from the date picker. To restrict user to select future date from date picker you just have to edit the line number 7 from the controller.

Just update it to if(date < today){ and you are good to go !

Output

If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.

Share this blog with your friends if you find it helpful somehow !

Thanks

Keep Coding

5 Comments

UnknownMay 26, 2021 at 5:53 AM
What if i want to resrict only three dates in future along with past dates
MahenderNovember 21, 2021 at 3:01 PM
Hi,

I tried above with all steps but for some reason its not working for me.

Could you please help me with this? Its not showing up calendar to pick date please let me know what I am doing wrong.
VishalAugust 3, 2023 at 9:15 AM
How to achieve same thing in LWC?