Compare date in lightning web component

Question

I want to compare my two dates, start date with end date, if start date >= end date so I can save if not I can't save, the problem I have is that in the console I get only the value of the end date and the start date is undefined , so always my condition goes to the else . How can I correct this?

==> JS

CompareDate(event){
        
        if (this.EndDate >= this.StartDate) {
            console.log('EndDate  > StartDate');
            console.log(' date fin est '+this.EndDate );
            console.log('date début'+this.StartDate);
            this.EndDate = event.target.value;
            this.Submit = true;
           
           
        }

        else {
            console.log('EndDate< StartDate');
            console.log('valeur date'+this.EndDate);
            console.log('date début'+this.StartDate);
            this.EndDate= event.target.value;
            this.Submit = false;
           


        }

    }

==> HTML

 <td>
                        <lightning-input-field field-name="Start_Date__c" required onchange={CompareDate}   value={StartDate}>
                        </lightning-input-field>
                      </td>
<td>
                        <lightning-input-field field-name="EndDate__c" required  onchange={CompareDate} value={EndDate}>
                        </lightning-input-field>
                      </td>

Answer 1

Data bindings are one-way in LWC, so you have to set the value in the variables first:

if(event.target.fieldName === 'Start_Date__c') {
  this.StartDate = event.target.value;
} else if(event.target.fieldName === 'End_Date__c') {
  this.EndDate = event.target.value;
}
this.Submit = this.StartDate && this.EndDate && this.StartDate < this.EndDate;

---

I wrote a demo app that works in my org.

import { LightningElement } from 'lwc';
    
export default class StartEndDemo extends LightningElement {
    startDate = new Date().toISOString();
    endDate;
    canSubmit;
    get cannotSubmit() {
        return !this.submit;
    }
    handleChange(event) {
        switch( event.target.fieldName) {
            case 'Start_Date__c': {
                this.startDate = event.target.value;
                break;
            }
            case 'End_Date__c': {
                this.endDate = event.target.value;
            }
        }
        this.submit = this.startDate && this.endDate && this.startDate < this.endDate;
    }
}

---

<template>
    <lightning-record-edit-form object-api-name="Account">
        <lightning-input-field field-name="Start_Date__c" onchange={handleChange} value={startDate}></lightning-input-field>
        <lightning-input-field field-name="End_Date__c" onchange={handleChange} value={endDate}></lightning-input-field>
        <lightning-button type="submit" label="Save" disabled={cannotSubmit}></lightning-button>
    </lightning-record-edit-form>
    Start: {startDate}<br/>
    End: {endDate}
</template>