Salesforce Lightning Web Component Date Validation

Salesforce Lightning Web Component Date Validation

Sample Lightning Web Component:

HTML:

<template>
    <lightning-card title="Date Validation">
        <lightning-layout vertical-align="center">
            <lightning-layout-item padding="around-small">
                <lightning-input 
                    type="Date" 
                    label="Start Date" 
                    value={startDate} 
                    onchange={handleChange} 
                    class="slds-p-around_medium">
                </lightning-input>
            </lightning-layout-item>
            <lightning-layout-item padding="around-small">
                <lightning-input 
                    type="Date" 
                    label="End Date" 
                    value={endDate} 
                    onchange={handleChange}
                    class="slds-p-around_medium">
                </lightning-input>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

JavaScript:

import { LightningElement } from 'lwc';
import LightningAlert from 'lightning/alert';

export default class SampleLightningWebComponent extends LightningElement {
    
    endDate;
    startDate;

    handleChange(event) {

        if ( event.target.label == 'Start Date' ) {

            let selectedStartDate = event.target.value;

            if ( selectedStartDate ) {

                selectedStartDate = new Date( event.target.value );
                let timeOffset = selectedStartDate.getTimezoneOffset();
                selectedStartDate = new Date( selectedStartDate.getTime() + ( timeOffset * 60000 ) );
                let dayValue = selectedStartDate.getDay();
                console.log('dayValue is', dayValue);

                if ( dayValue === 1 ) {

                    console.log('Inside Monday');
                    this.startDate = event.target.value;

                } else {

                    LightningAlert.open( {
                        message: 'Start Date should be Monday',
                        theme: 'error',
                        label: 'Error!'
                    } );
                    this.startDate = ''; 
                    this.endDate = ''; 
                    setTimeout( () => {
                        this.startDate = null; 
                        this.endDate = null; 
                    }, 0);

                }

            } else {

                this.startDate = ''; 
                this.endDate = ''; 
                setTimeout( () => {
                    this.startDate = null; 
                    this.endDate = null; 
                }, 0 );

            }

        } else if ( event.target.label == 'End Date' ) {

            if ( this.startDate == null ) {

                LightningAlert.open( {
                    message: 'Start Date should be selected first',
                    theme: 'error',
                    label: 'Error!'
                } );
                this.endDate = ''; 
                setTimeout( () => {
                    this.endDate = null; 
                }, 0);

            } else {

                this.endDate = event.target.value;

                if ( this.startDate > this.endDate ) {

                    LightningAlert.open( {
                        message: 'End Date should be greater than Start Date',
                        theme: 'error',
                        label: 'Error!'
                    } );
                    this.endDate = ''; 
                    setTimeout( () => {
                        this.endDate = null; 
                    }, 0 );

                } else {

                    let dateDiff = parseInt(
                        ( new Date( this.endDate ) - new Date( this.startDate ) ) 
                        / (1000 * 60 * 60 * 24), 10
                    );
                    console.log(
                        'dateDiff is',
                        dateDiff
                    );
                    
                    if ( 
                        dateDiff <=11 && dateDiff % 11 != 0 ||
                        ( dateDiff - 11 ) % 14 != 0 
                    ) {

                        console.log(
                            'Date Diff divided by 11 remainder is',
                            dateDiff % 14
                        );
                        LightningAlert.open( {
                            message: 'End Date should be Friday and differencece should be  in multiple of two weeks apart',
                            theme: 'error',
                            label: 'Error!'
                        } );
                        this.endDate = ''; 
                        setTimeout( () => {
                            this.endDate = null; 
                        }, 0 );

                    } 

                }

            }

        } 

    }

}

js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>62.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Leave a Reply