JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<form id="myForm">
    <p>Date Of Birth:
        <input type="text" name="datepicker_dob" id="datepicker_dob" />
    </p>
    <p>Date Of Joining:
        <input type="text" name="datepicker_doj" id="datepicker_doj" />
    </p>
    <p>Date Of Leaving:
        <input type="text" name="datepicker_dol" id="datepicker_dol" />
    </p>
    <button type="button" id="saveButton">Save</button>
</form>

CSS

label.error {
    display:block;
    color:red
}

JavaScript

$(document).ready(function () {
    $("[id$=datepicker_dob],[id$=datepicker_doj],[id$=datepicker_dol]").datepicker({
        onSelect: function () {
            $(this).valid();
        }
    });
});

$.validator.addMethod("dateValidatorLE", function (value, element, params) {

    var isDateValid = true;
    $(params).each(function (i) {
        //  alert($(params[i]).val());
        isDateValid &= (Date.parse(value) > Date.parse($(params[i]).val()))
    });
    return this.optional(element) || isDateValid;
}, $.validator.format('general error message'));

$('#myForm').validate({
    rules: {
        datepicker_doj: {
            dateValidatorLE: ['#datepicker_dob']
        },
        datepicker_dol: {
            dateValidatorLE: ['#datepicker_dob', '#datepicker_doj']
        }
    },
    messages: {
        datepicker_doj: {
            dateValidatorLE: 'DOJ must be greater than DOB'
        },
        datepicker_dol: {
            dateValidatorLE: 'DOL must be greater that DOJ and DOB'
        }
    },
    onkeyup: function (e) {
        this.element(e);
    }
});

$('#saveButton').click(function () {
    //$('#datepicker_dol').valid();
});