FormValidator will not validate date with DD/MM/YYYY format

[George]

Hello,

As you can see at https://stackblitz.com/edit/react-6hwrdehg?file=App.js the formValidator will not validate a date with DD/MM/YYYY format. It will work with MM/DD/YYYY. I have assigned 'el' to the formValidator's locale, but it still won't work.

[Priyanka Karthikeyan]

Hi George,

 

Thank you for reaching out to us.

 

The issue arises because the FormValidator does not inherently support the dd/MM/yyyy date format for validation even when you specify the locale. By default, the validation expects a date format like MM/dd/yyyy. Since you are using the dd/MM/yyyy format, you need to define a custom validation method to ensure the date is validated correctly.

 

You can define a custom function that validates the date format as dd/MM/yyyy using a regular expression or JavaScript's Date parsing capabilities.

 

Update the validation options and add a custom rule:

 

 

import { useState, useEffect, useRef } from 'react';
import * as React from "react";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { FormValidator } from '@syncfusion/ej2-inputs';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';

 

let formObject;

 

function App() {
    const userNameRef = useRef(null);
    const [date, setDate] = useState('');

 

    const dateChangeHandler = (event) => {
        setDate(event.value);
    };

 

    useEffect(() => {
        userNameRef.current.focusIn();
        const options = {
            rules: {
                date: {
                    required: [true, '* Please enter your date'],
                    custom: [validateCustomDate, '* Please enter a valid date in DD/MM/YYYY format'],
                },
            },
        };

 

        function validateCustomDate(args) {
            const datePattern = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/; // DD/MM/YYYY
            const isValidFormat = datePattern.test(args.value);
            
            if (isValidFormat) {
                const [day, month, year] = args.value.split('/');
                const date = new Date(`${year}-${month}-${day}`);
                return date.getDate() == day && date.getMonth() + 1 == month && date.getFullYear() == year;
            }
            return false;
        }

 

        // Initialize the form validator
        formObject = new FormValidator('#form1', options);
    }, []);

 

    const onSubmit = () => {
        formObject.validate();
        if (formObject.validate()) {
            formObject.element.reset();
        }
    };

 

    return (
        <div>
            <div className="control_wrapper" id="control_wrapper">
                <h3 className="form-title">User Login</h3>
                <div className="control_wrapper textbox-form">
                    <form id="form1" method="post">
                        <div className="form-group">
                            <DatePickerComponent
                                ref={userNameRef}
                                name="date"
                                value={date}
                                change={dateChangeHandler}
                                placeholder="Date"
                                floatLabelType="Auto"
                                format={"dd/MM/yyyy"}
                                data-msg-containerid="errorForDate"
                            />
                            <div id="errorForDate" />
                        </div>
                    </form>
                    <div className="submitBtn">
                        <ButtonComponent onClick={onSubmit}>Submit</ButtonComponent>
                    </div>
                </div>
            </div>
        </div>
    );
}

 

export default App;
 

 

Sample: https://stackblitz.com/edit/react-6hwrdehg-ydx3wkzx?file=App.js

 

Regards,

Priyanka K

 

[George]

Thank you for providing a solution. I'll implement it when able and report back if needed,

[Priyanka Karthikeyan]

Hi George,

Thank you for the update. Please get back to us if you need any further assistance.

Regards,

Priyanka K