function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
balaji manikandanbalaji manikandan 

How to restrict past dates from date picker in lighting input?

Im using ui:inputDate  to display date filed ,
Is there any solution to disable the past dates in date picker?
Best Answer chosen by balaji manikandan
sfdcMonkey.comsfdcMonkey.com
i don't think so that we can edit ui:input or lightning:input date picker, but you can do it by jQuery UI,
and for lightning look n feel use slds-input class, check below post link :
http://sfdcmonkey.com/2018/02/23/restrict-past-dates-lightning-component/

let me inform if it helps you and close your query by choosing best answer if you got your answer :)
Thanks

All Answers

sfdcMonkey.comsfdcMonkey.com
Hi Balaji,
i have created a sample post on it, please refer the below link :
http://sfdcmonkey.com/2017/12/26/validation-past-date-lightning-component/ (http://sfdcmonkey.com/2017/12/26/validation-past-date-lightning-component/)
however there is no standard way to disable date in date picker

Thanks,
let me inform if it helps you
balaji manikandanbalaji manikandan
Hi Piyush,
I saw that post in your sfdcmonkey.com , i use refer to your site first but i want it to disable the past date not by validation.
i also came across  (https://codepen.io/jamesbarnett/pen/jEOQoO)  this link ,where they used Jquery to similar functionality
Do you  know how to implement jquery functionality in controller?
 
sfdcMonkey.comsfdcMonkey.com
Yes by jQuery UI  you can do this, but not with ui:input and lightning:input fields, it will only work with html <input> tag,
balaji manikandanbalaji manikandan
ok Sure, If  there is any possible workaround to use it with ui:input or lighting:input let me know.
thanks
sfdcMonkey.comsfdcMonkey.com
i don't think so that we can edit ui:input or lightning:input date picker, but you can do it by jQuery UI,
and for lightning look n feel use slds-input class, check below post link :
http://sfdcmonkey.com/2018/02/23/restrict-past-dates-lightning-component/

let me inform if it helps you and close your query by choosing best answer if you got your answer :)
Thanks
This was selected as the best answer
balaji manikandanbalaji manikandan
Thanks  Piyush it worked, can u help on changing that look and feel?
 
Anushka Bansal 4Anushka Bansal 4
Using <lightning:input type="date" min="2018-05-29" /> we can disable past dates 
we can even dynamically set the min attribute using a string type attribute in the component and javascript in the controller
 
sfdc vasanthsfdc vasanth
Thanks Anushka Bansal.. The solution you pointed seems to be very straight forward and am glad I was able to work it out
Jake BullardJake Bullard

Great suggestion Anushka! 

 

Here is the rest of the code for those interested. 

 

In your component call your controller:

<aura:handler name="init" action="{!c.doInit}" value="{!this}" />


In your Controlller do this: 

doInit : function(component, event, helper) {
  var today = $A.localizationService.formatDate(new Date(), "YYYY-MM-DD");
  component.set("v.MinDate", today)
}
Vijay NirateVijay Nirate
Hi all,
we can use lightning input to restrict the past dates using "min" attribute of "lightning:input".

Below is the code.

<aura:component>
    <!-- used for storing today's date -->
    <aura:attribute name="todaysDate" type="Object" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
     <lightning:input type="date" min="{!v.todaysDate}"/>
</aura:component>

({
    doInit: function(component, event, helper) {      
        // get todays date
        var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
        var yyyy = today.getFullYear();
        
        today = yyyy + '-' + mm + '-' + dd;
        
        component.set("v.todaysDate",today);
    },
})
Pooja AndePooja Ande
Thanks Vijay, this exactlt worked for me !!!