JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="https://www.xximo.com/global/js/jquery.metadata.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.min.js"></script>
<form action="JavaScript:void(0);" method="POST">
 <input type="text" name="field1" class="required">
 <input type="text" name="date" class="group1 required {dateITA: true, futureDateAndTime: 'group1'}" value="21/05/2012" > 
 <input type="text" name="time" class="group1 required {time: true, futureDateAndTime: 'group1'}"  value="12:10">
 <button type="submit">Go</button>
</form>

CSS

input {
    display: block;
    margin: 10px;
}
button {
    display: block;
    margin: 20px 10px 10px 10px;
}

JavaScript

$.validator.addMethod("futureDateAndTime"
    ,function (value, element, groupId) {
        
        // Get the time and date value using the groupId as defined in the class
        var $date = $('.' + groupId + '[name=date]');
        var $time = $('.' + groupId + '[name=time]');
        
        // If one of the two is not present skip this validation: too early
        if ($date.is(':blank') || $time.is(':blank')) return true;
        
        // Construct the date out of the two parts. We know the values will be 
        // parseable because of the other validation rules. (dateITA and time)
        var t = $time.val().split(':');
        var d = $date.val().split('/');
        var date = new Date(d[2], d[1] - 1, d[0], t[0], t[1], 0, 0);
        
        // Check if the provided datetime is in the future
        return date.getTime() > (new Date()).getTime();
                
    }, "Please provide a future date and time"
);

$('form').validate();