Date Validation in LWC

 

dateValidation.html

 <template>

<lightning-card title="Date Validation in LWC">

<div class="slds-p-around_medium">

<lightning-input type="date" name="startDate" label="Start Date"

onchange={dateHandler}></lightning-input>

<lightning-input type="date" name="endDate" label="End Date"

onchange={dateHandler}></lightning-input>

<template if:true={error}>

<p class="slds-text-color_error">{error}</p>

</template>

<lightning-button variant="brand" label="submit" onclick={submitHandler}

class="slds-m-top_medium"></lightning-button>

</div>

</lightning-card>

</template>  

dateValidation.js

import { LightningElement } from 'lwc';

export default class DateValidation extends LightningElement {

startDate

endDate

error

dateHandler(event){

const {name, value} = event.target

this[name] = value

}

submitHandler(){

if(this.validateDate(this.startDate, this.endDate)){

console.log("Date is Valid")

} else{

this.error = "Invalid Input...End Date cannot be greater than Start Date"

}

}

validateDate(startDate, endDate){

return new Date(startDate).getTime() < new Date(endDate).getTime()

}

}