+ Start a Discussion
Diego OlveraDiego Olvera 

How to restrict certain days from date picker in lighting component?

Hi everyone,
I'm working with a lightning component and it's working cool but I want to know if it's possible to disable certain days from a datepicker (weekends).
I did something similar but just for past days. 

I've reading that could be possible using jQuery but I can't find a good "documentation" about that, 

Thanks. 
Regards. 
Best Answer chosen by Diego Olvera
Maharajan CMaharajan C
Hi Diego,

Yes you can do this by using the external JS. Refer the steps mentioned in below link except the JS controller. To restrict the weekend we need the changes in controller JS.
http://sfdcmonkey.com/2018/02/23/restrict-past-dates-lightning-component/


Follow the below steps:

1.   Download the JS from the below file and then upload it in your Static Resorce .(  Name the Static Resource as : jquery224  )
https://code.jquery.com/jquery-2.2.4.min.js

2. Download the below JS zip file and then upload it in your Static Resorce .(  Name the Static Resource as : jQuery_UI  )
https://jqueryui.com/resources/download/jquery-ui-1.12.1.zip

3.  Create the Aura Component as mentioned in below LInk: ( Don't use the Controller from the below Link just copy .cmp file) 
http://sfdcmonkey.com/2018/02/23/restrict-past-dates-lightning-component/

4.
Change the JS Controller as below:

({
    scriptsLoaded : function(component, event, helper) {
        $(document).ready(function(){ 
            //Restrict past date selection in date picker  
            $( "#datepickerId" ).datepicker({
                beforeShowDay: function(date) {
                    var show = true;
                    if(date.getDay()==6||date.getDay()==0) show=false
                    return [show];

                },
            });           
        });
    },
    
    getVal : function(component,event,helper){
        // to get selected date value using jQuery  
        var oDate = $('#datepickerId').val();
        alert(oDate);
        
    }  
})

Thanks,
Maharajan.C

 

All Answers

Maharajan CMaharajan C
Hi Diego,

Yes you can do this by using the external JS. Refer the steps mentioned in below link except the JS controller. To restrict the weekend we need the changes in controller JS.
http://sfdcmonkey.com/2018/02/23/restrict-past-dates-lightning-component/


Follow the below steps:

1.   Download the JS from the below file and then upload it in your Static Resorce .(  Name the Static Resource as : jquery224  )
https://code.jquery.com/jquery-2.2.4.min.js

2. Download the below JS zip file and then upload it in your Static Resorce .(  Name the Static Resource as : jQuery_UI  )
https://jqueryui.com/resources/download/jquery-ui-1.12.1.zip

3.  Create the Aura Component as mentioned in below LInk: ( Don't use the Controller from the below Link just copy .cmp file) 
http://sfdcmonkey.com/2018/02/23/restrict-past-dates-lightning-component/

4.
Change the JS Controller as below:

({
    scriptsLoaded : function(component, event, helper) {
        $(document).ready(function(){ 
            //Restrict past date selection in date picker  
            $( "#datepickerId" ).datepicker({
                beforeShowDay: function(date) {
                    var show = true;
                    if(date.getDay()==6||date.getDay()==0) show=false
                    return [show];

                },
            });           
        });
    },
    
    getVal : function(component,event,helper){
        // to get selected date value using jQuery  
        var oDate = $('#datepickerId').val();
        alert(oDate);
        
    }  
})

Thanks,
Maharajan.C

 
This was selected as the best answer
Diego OlveraDiego Olvera
Thanks Maharajan C,
It works perfectly and very good explanation.
Regards.