Hi I need to set my Range in the date picker to be grayed out except my max and date min, but still due to salesforce upgrade user can select the date beyond the min and max value. please help me to grayed out the rest of the date...so that it won't get selected by User. Below s the code.

    <lightning-card  title="Range Selector">
        <div class="slds-grid slds-gutters">
            <div class="slds-col slds-m-left_large">
                <lightning-input type="date" name="startdate" class="startdate" label="Start Date" value={start_date} onchange={handleDateChange} required ></lightning-input>
            <div class="slds-col slds-m-right_large">
                <lightning-input type="date" name="enddate" class="enddate" label="End Date"  value={end_date} onchange={handleDateChange} required></lightning-input>
        <div class="slds-grid slds-gutters">
            <div class="slds-col slds-m-left_large">
                <div class="slds-text-color_error slds-p-top_medium">No Of Days Selected : {range}</div>

import { LightningElement, track, api } from 'lwc';
export default class RangeSelector extends LightningElement {
    today = new Date();
    @track start_date;
    @track end_date;
    @track range;

    connectedCallback() {
        this.start_date = (this.start_date) ? this.start_date : this.today.toJSON().slice(0,10);
        this.end_date = (this.end_date) ? this.end_date : this.addDays(this.today,1).toJSON().slice(0,10);
        this.range = this.diff(this.start_date,this.end_date);

    addDays = (sd,days) => {
        const d = new Date(Number(sd));
        d.setDate(sd.getDate() + days);
        return d;

    diff = (sdate,edate) => {
        let diffTime = Math.abs(new Date(edate).getTime() - new Date(sdate).getTime());
        return Math.ceil(diffTime / (1000 * 60 * 60 * 24));

    valid_date = (sdate,edate) => {
        return new Date(edate) >= new Date(sdate);

    handleDateChange = (evt) => {
        let field_name = evt.target.name;

        if(field_name === 'startdate')
            this.start_date = evt.target.value; 
        if(field_name === 'enddate')
            this.end_date = evt.target.value; 

        if(this.valid_date(this.start_date,this.end_date) === true){
            this.range = this.diff(this.start_date,this.end_date);
            let inputfield = this.template.querySelector("."+field_name);
            inputfield.setCustomValidity('End date must be greater than the Start date'); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.