Autotab date-of-birth entry with validation working in fiddle but not in plunker

Question

I am working on building a date-of-birth input field using jQuery auto-tab. The exact same code works fine in fiddle but not in plunker. I tried including jquery auto-tab's script and link to the plunker but none worked. Please suggest what am I missing? Any help would be appreciated.

working code on jsfiddle

same code on plunker

HTML

<label for="day">Date of Birth:</label>
<div id="date1" class="datefield">
    <input id="day" type="text" maxlength="2" size="2" placeholder="DD"/> /              
    <input id="month" type="text" maxlength="2" size="2" placeholder="MM"/>/
    <input id="year" type="text" maxlength="4" size="3" placeholder="YYYY"/>
</div>
<br/><br/><br/>
<div id="your_date" class="empty"></div>

Javascript

var messages = ["Keep Trying", "Wrong format" , "Wrong date. Date in future"];

(function () {  
    $('#date1 input').autotab('filter', 'number');    
    $('.numbers').autotab('filter', 'number');
    $.autotab({ tabOnSelect: true });
    $(document).ready(function () {

        var input = $("#day"), date_string = $("#your_date"), date = null;
        var empty_string = "Type a date above";  
        date_string.text(empty_string);
        addHandler( $("#day"));
        addHandler( $("#month"));
        addHandler( $("#year"));
    });
}());

function addHandler(input) {
    input.keyup( 
        function (e) {
            parseDate();
        }
    );
}
function parseDate() {
    var date_string = $("#your_date"), date = null  
    var input1 = $("#day")
    var input2 = $("#month")
    var input3 = $("#year")
    var dateinput = input1.val() + "/" + input2.val() + "/" + input3.val();
    var empty_string = "Type a date above";  

    date_string.removeClass();
    if (dateinput.length > 2) {
        date = Date.parseExact(dateinput, "dd/MM/yyyy");
        if (date !== null ) {
            if ( date.compareTo(Date.parse("now") )<  1 ) {
                $("#date1").removeClass("error");
                date_string.addClass("accept").text(date.toString("dddd, MMMM dd, yyyy h:mm:ss tt"));
            } else {
               $("#date1").addClass("error");
               date_string.addClass("error").text(messages[2] + "...");
            }
        } else if (dateinput.length == 10) {
            $("#date1").addClass("error");
            date_string.addClass("error").text(messages[1] + "...");
        } else {
            $("#date1").addClass("error");
            date_string.addClass("error").text(messages[0] + "...");
        }
    } else {
        date_string.text(empty_string).addClass("empty");
    }
}

CSS

body { 
    margin: 2em; 
    font-family: sans-serif; 
    font-size: 90%; 
    background: #f8f7f7; 
}
label { 
    float: left; 
    display: block; 
    width: 11em; 
}
.datefield { 
    display: inline; 
    padding: 0.3em; 
    border: inset 1px #CCC; 
    background: #FFF; 
    border-radius: 4px;
    color: #666;
}
.datefield * { 
    display: inline-block;
}
.datefield input { 
    width: 1.7em; 
    padding: 0 0.4em; 
    border: none; 
    font-size: 100%; 
    background: none;
    color: #000;            
}
.datefield input#year { width:2.5em; }
.datefield input:focus { outline:none; }
.error input {
    color : red;
}