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> 