You need to sign in to do that
Don't have an account?
Pavushetti Abhilash 3
DATEPICKER IN LWC
Hi Everyone.
I need to implement Datepicker on LWC with some validations. Weekends shouldnot selectable and user is allowed to select only upto 30 days and past days should grey out and disable it. Refer method 1.
I have used JQueryLib for this.Please refer method 2.
It will be helpful to get solution either in METHOD 1 OR 2.
METHOD1:
<lightning-input type="date" onchange={handleCollectionDate} class="selector" min={mindate} disabled={disabled} ></lightning-input>
JS:
@track mindate;
@track selector;
@track disabled;
dispSelectedDate;
connectedCallback() {
let today = new Date() ;
let dd = today.getDate() + 2;
let mm = today.getMonth() + 1;
let y = today.getFullYear();
this.mindate = y + '-' + mm + '-' + dd;
console.log("mindate",this.mindate);
this.selector = 'cursor';
this.dispSelectedDate = '';
this.template.querySelectorAll('.selector').forEach(each => {
each.value = '';
});
if( this.getDay()==6|| this.getDay()==0){
console.log('weekend', this.getDay());
disabled=true;
}
}
-----------------------------------------
But above code is not working for disable weekends and past dates are grey in color but user can able to select.(actually user should not selectable).
METHOD 2:
<lightning-input type="date" onchange={handleCollectionDate} class='selector'></lightning-input>
JS------
renderedCallback() {
Promise.all([
loadScript(this,jquerylib),
loadScript(this,jQuery + '/jquery-ui-1.12.1/jquery-ui.min.js')
]).then(() =>{
$(".datepickerId").datepicker({
beforeShowDay: function(date) {
var today = new Date();
if(date > today){
return [true];
}
else{
return [false];
}
},
});
console.log('JQueryLib loaded.');
}).catch(error =>{
console.log('Failed to load the JQueryLib : ' +error);
})
}
--------------
I found that JQueryLib loaded successfully in console.log. Let me know where I am missing.
I need to implement Datepicker on LWC with some validations. Weekends shouldnot selectable and user is allowed to select only upto 30 days and past days should grey out and disable it. Refer method 1.
I have used JQueryLib for this.Please refer method 2.
It will be helpful to get solution either in METHOD 1 OR 2.
METHOD1:
<lightning-input type="date" onchange={handleCollectionDate} class="selector" min={mindate} disabled={disabled} ></lightning-input>
JS:
@track mindate;
@track selector;
@track disabled;
dispSelectedDate;
connectedCallback() {
let today = new Date() ;
let dd = today.getDate() + 2;
let mm = today.getMonth() + 1;
let y = today.getFullYear();
this.mindate = y + '-' + mm + '-' + dd;
console.log("mindate",this.mindate);
this.selector = 'cursor';
this.dispSelectedDate = '';
this.template.querySelectorAll('.selector').forEach(each => {
each.value = '';
});
if( this.getDay()==6|| this.getDay()==0){
console.log('weekend', this.getDay());
disabled=true;
}
}
-----------------------------------------
But above code is not working for disable weekends and past dates are grey in color but user can able to select.(actually user should not selectable).
METHOD 2:
<lightning-input type="date" onchange={handleCollectionDate} class='selector'></lightning-input>
JS------
renderedCallback() {
Promise.all([
loadScript(this,jquerylib),
loadScript(this,jQuery + '/jquery-ui-1.12.1/jquery-ui.min.js')
]).then(() =>{
$(".datepickerId").datepicker({
beforeShowDay: function(date) {
var today = new Date();
if(date > today){
return [true];
}
else{
return [false];
}
},
});
console.log('JQueryLib loaded.');
}).catch(error =>{
console.log('Failed to load the JQueryLib : ' +error);
})
}
--------------
I found that JQueryLib loaded successfully in console.log. Let me know where I am missing.
can you share all code here.