You need to sign in to do that
Don't have an account?
Diego 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.
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.
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
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
It works perfectly and very good explanation.
Regards.
Thanks
Abhilash