Restrict Past or Future date selection in Lightning Component Salesforce


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
({
	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 



Post a Comment

0 Comments