JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" >
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    </head>
    <body>
        <input type="text" value="Normal input field">
        <input type="text" id="myDate" readonly>
        <span id="info">Info</span>
    </body>
</html>

JavaScript

$(document).ready(function() {
    $("#myDate").datepicker();
    
    $(this).keydown(function(){
        //  LEFT: 37
        //    UP: 38
        // RIGHT: 39
        //  DOWN: 40
        //   TAB: 9

        var keyCode = event.which;
        if(keyCode != 9) // if tab was not pressed, use pressed key for calendar control
        {
            event.preventDefault();
            event.stopPropagation();
            
            var parts = $("#myDate").val().split("/");
            var currentDate = new Date(parts[2], parts[0]-1, parts[1]); // months are 0-based
            
            switch(keyCode)
            {
                case 37: // LEFT, -1 day
                    currentDate.setDate(currentDate.getDate() -1);
                    break;
                case 38: // UP, -1 week
                    currentDate.setDate(currentDate.getDate() -7);
                    break;
                case 39: // RIGHT, +1 day
                    currentDate.setDate(currentDate.getDate() +1);
                    break;
                case 40: // DOWN, +1 week
                    currentDate.setDate(currentDate.getDate() +7);
                    break;
            }
            
            $("#info").html( currentDate.toString() );
            if(currentDate != null)
            {
                $("#myDate").datepicker("setDate", currentDate);
            }
        }
        
    });
});