0

I have a requirement where i need to check two dates, basically if the Start Date is greater than End Date, i need to clear the current field that is being changed. For the first time it works fine, but whenever i try to click again to trigger the same rule, even if the date variable is null, the date picker is showing the selected value on HTML.

JS

@track creationStartDate = null; @track creationEndDate = null; startChange(event){ this.checkDatesGreaterToday(event.detail.value); this.creationStartDate = event.detail.value; let startGreaterThanEnd = this.validateDates(); this.creationStartDate = startGreaterThanEnd ? null : event.detail.value } endChange(event){ this.checkDatesGreaterToday(event.detail.value); this.creationEndDate = event.detail.value; let startGreaterThanEnd = this.validateDates(); this.creationEndDate = startGreaterThanEnd ? null : event.detail.value } validateDates(){ if(this.creationStartDate && this.creationEndDate && (this.creationStartDate>this.creationEndDate)){ this.showErrorToast('Creation Start Date cannot be greater than Creation End Date', 'error'); return true; } else { return false; } }

HTML

<lightning-layout-item flexibility="auto"> <div class="header-column slds-p-right_x-small"> <lightning-input type="date" label="Creation Start Date" value={creationStartDate} onchange={startChange} max={today}></lightning-input> </div> </lightning-layout-item> <lightning-layout-item flexibility="auto"> <div class="header-column slds-p-right_x-small"> <lightning-input type="date" label="Creation End Date" value={creationEndDate} onchange={endChange} max={today}></lightning-input> </div> </lightning-layout-item>

enter image description here

Improve this question

1 Answer 1

Reset to default
0

The date picker component does not automatically refresh its displayed value when the bound variable is set to null. You can force the component to re-render by temporarily setting the value to an empty string before setting it to null.

@track creationStartDate = null; @track creationEndDate = null; startChange(event) { this.checkDatesGreaterToday(event.detail.value); this.creationStartDate = event.detail.value; let startGreaterThanEnd = this.validateDates(); if (startGreaterThanEnd) { this.creationStartDate = ''; setTimeout(() => { this.creationStartDate = null; }, 0); } else { this.creationStartDate = event.detail.value; } } endChange(event) { this.checkDatesGreaterToday(event.detail.value); this.creationEndDate = event.detail.value; let startGreaterThanEnd = this.validateDates(); if (startGreaterThanEnd) { this.creationEndDate = ''; setTimeout(() => { this.creationEndDate = null; }, 0); } else { this.creationEndDate = event.detail.value; } } validateDates() { if (this.creationStartDate && this.creationEndDate && (this.creationStartDate > this.creationEndDate)) { this.showErrorToast('Creation Start Date cannot be greater than Creation End Date', 'error'); return true; } else { return false; } }

When the dates are invalid, the date variables are first set to an empty string and then to null after a short delay using setTimeout. This forces the date picker to refresh and clear the displayed value.

Improve this answer
1
  • 1
    This did the trick, thanks @Tushar Jadav Commented Aug 15, 2024 at 14:54

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.